<template>
    <div class="home-part-main">
        <FawaBanner
            url="/newHome/header-banner.png"
            title="Welcome To FAWA" />
        <!-- about fawa -->
        <div
            id="about-fawa"
            class="about-fawa"
            role="tabpanel"
            aria-labelledby="about-fawa-tab">
            <div class="about-fawa-content">
                <!-- 标题区域 -->
                <div class="about-title-section">
                    <h2 class="about-title">About FAWA</h2>
                    <p class="about-description">
                        FAWA (Find A Wonderful Angel) is a humanistic Web3 platform centered on
                        "Serving Global Muslim Women and Muslim Women's Power." Based on all Muslim
                        women, it builds a global digital ecosystem platform integrating web2.0 and
                        web3.0 through five modules: female social networking & community, digital
                        IP construction, business ecosystem, asset management, and Depin
                        infrastructure
                    </p>
                </div>

                <!-- 四个层面滑动区域 -->
                <div class="four-levels-container">
                    <div class="four-levels-wrapper">
                        <div class="level-card">
                            <img
                                src="/newHome/body/about_fawa_1.png"
                                alt="At the technical level" />
                        </div>
                        <div class="level-card">
                            <img
                                src="/newHome/body/about_fawa_2.png"
                                alt="On the economic front" />
                        </div>
                        <div class="level-card">
                            <img
                                src="/newHome/body/about_fawa_3.png"
                                alt="From a strategic perspective" />
                        </div>
                        <div class="level-card">
                            <img
                                src="/newHome/body/about_fawa_4.png"
                                alt="At the ecological level" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  our vision -->
        <div
            id="our-vision"
            class="our-vision"
            role="tabpanel"
            aria-labelledby="our-vision-tab">
            <div class="our-vision-content">
                <!-- 标题区域 -->
                <div class="vision-title-section">
                    <h2 class="vision-title">Vision</h2>
                    <p class="vision-description">
                        FAWA (Find A Wonderful Angel), with the core concept of "serving Muslim
                        women globally and empowering Muslim women", is committed to building a Web3
                        digital ecosystem platform that combines humanistic care and technological
                        innovation
                    </p>
                </div>

                <!-- 四个愿景卡片 -->
                <div class="vision-cards-container">
                    <!-- 第一个卡片：Dare to express -->
                    <div class="vision-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/our_vision_1.png"
                                alt="Dare to express" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">Dare to Express</h3>
                            <p class="card-description">
                                Empower Muslim women with independent digital identity and
                                governance power
                            </p>
                        </div>
                    </div>

                    <!-- 第二个卡片：Dare to create -->
                    <div class="vision-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/our_vision_2.png"
                                alt="Dare to create" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">Dare to Create</h3>
                            <p class="card-description">
                                Unleash personal value through community building, IP development,
                                and asset management
                            </p>
                        </div>
                    </div>

                    <!-- 第三个卡片：Protect each other -->
                    <div class="vision-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/our_vision_3.png"
                                alt="Protect each other" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">Mutual Care</h3>
                            <p class="card-description">
                                Build a safe, warm, and resonant community for Muslim women
                            </p>
                        </div>
                    </div>

                    <!-- 第四个卡片：Building the future together -->
                    <div class="vision-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/our_vision_4.png"
                                alt="Building the future together" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">Build the Future Together</h3>
                            <p class="card-description">
                                Promote the formation of a global digital economy and cultural
                                consensus led by Muslim women
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  mission -->
        <div
            id="mission"
            class="mission"
            role="tabpanel"
            aria-labelledby="mission-tab">
            <div class="mission-content">
                <!-- 标题区域 -->
                <div class="mission-title-section">
                    <h2 class="mission-title">Mission</h2>
                    <p class="mission-description">
                        FAWA's mission is to create a secure, open, and sustainable global digital
                        ecosystem for Muslim women through Web3 technology + DAO(Decentralized
                        Autonomous Organization) governance + Depin(Decentralized Physical
                        Infrastructure Network) infrastructure
                    </p>
                </div>

                <!-- 四个使命卡片 -->

                <FunctionalPositioning
                    :items="missionData"
                    layout="horizontal"
                    :columns="4" />
            </div>
        </div>
        <!-- core value -->
        <div
            id="platform-core-value"
            class="platform-core-value"
            role="tabpanel"
            aria-labelledby="platform-core-value-tab">
            <div class="platform-content">
                <!-- 标题区域 -->
                <div class="platform-title-section">
                    <h2 class="platform-title">Core Value</h2>
                    <p class="platform-description">
                        The core value of FAWA lies not only at the technical level but, more
                        importantly, in the integration of its humanistic spirit and the economic
                        potential of Muslim women. As the world's first Web3 platform dedicated to
                        Muslim women and female empowerment, FAWA is committed to creating a
                        virtuous cycle between service value and financial value, and building a
                        sustainable digital civilization ecosystem through community consensus,
                        technological empowerment, and global expansion, ultimately aiming to serve
                        global female users and establish the largest female digital ecosystem
                        platform
                    </p>
                </div>

                <!-- 五个核心价值卡片 -->
                <div class="platform-cards-container">
                    <div class="platform-cards-wrapper">
                        <!-- 第一个卡片：Women give value -->
                        <div
                            class="platform-card"
                            @click="openModal('core-value-1')">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/platform_1.png"
                                    alt="Women give value" />
                            </div>
                        </div>

                        <!-- 第二个卡片：Ecological synergy -->
                        <div
                            class="platform-card"
                            @click="openModal('core-value-2')">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/platform_2.png"
                                    alt="Ecological synergy" />
                            </div>
                        </div>

                        <!-- 第三个卡片：Global strategic value -->
                        <div
                            class="platform-card"
                            @click="openModal('core-value-3')">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/platform_3.png"
                                    alt="Global strategic value" />
                            </div>
                            <!-- <div class="card-content">
                                <h3 class="card-title">Global strategic value</h3>
                            </div> -->
                        </div>

                        <!-- 第四个卡片：Technology and financial innovation value -->
                        <div
                            class="platform-card"
                            @click="openModal('core-value-4')">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/platform_4.png"
                                    alt="Technology and financial innovation value" />
                            </div>
                            <!-- <div class="card-content">
                                <h3 class="card-title">
                                    Technology and financial innovation value
                                </h3>
                            </div> -->
                        </div>

                        <!-- 第五个卡片：Women give value -->
                        <div
                            class="platform-card"
                            @click="openModal('core-value-5')">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/platform_5.png"
                                    alt="Women give value" />
                            </div>
                            <!-- <div class="card-content">
                                <h3 class="card-title">Women give value</h3>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- global development goals -->
        <div
            id="global-development-goals"
            class="global-development-goals"
            role="tabpanel"
            aria-labelledby="global-development-goals-tab">
            <div class="global-development-content">
                <!-- 标题区域 -->
                <div class="global-development-title-section">
                    <h2 class="global-development-title">Global development goals</h2>
                    <p class="global-development-description">
                        FAWA's global development goal is not merely about entering more countries
                        and markets. Instead, through a multi - dimensional strategy encompassing
                        compliance, internationalization, capitalization, and socialization, it aims
                        to make a leap from a platform for Muslim - region women to a global leader
                        in female digital civilization.
                    </p>
                </div>

                <!-- 卡片区域 -->
                <div class="global-development-cards">
                    <!-- 第一行 -->
                    <div class="cards-row first-row">
                        <!-- 合规发展路径 - 宽卡片 -->
                        <div
                            class="development-card card-wide"
                            @click="openModal('development-1')">
                            <img
                                v-if="!isMobile"
                                src="/newHome/body/development_1.png"
                                class="card-image desktop-image" />
                            <img
                                v-if="isMobile"
                                src="/newHome/body/development_mobile_1.png"
                                class="card-image mobile-image" />
                        </div>

                        <!-- 全球女性市场扩张 -->
                        <div
                            class="development-card card-normal"
                            @click="openModal('development-2')">
                            <img
                                src="/newHome/body/development_2.png"
                                alt="Global women's market expansion"
                                class="card-image" />
                        </div>
                    </div>

                    <!-- 第二行 -->
                    <div class="cards-row second-row">
                        <!-- 资本市场目标 -->
                        <div
                            class="development-card card-normal"
                            @click="openModal('development-3')">
                            <img
                                src="/newHome/body/development_3.png"
                                alt="Capital market objectives"
                                class="card-image" />
                        </div>

                        <!-- 技术与生态扩张 -->
                        <div
                            class="development-card card-normal"
                            @click="openModal('development-4')">
                            <img
                                src="/newHome/body/development_4.png"
                                alt="Technology and ecological expansion"
                                class="card-image" />
                        </div>

                        <!-- 社会文化影响 -->
                        <div
                            class="development-card card-normal"
                            @click="openModal('development-5')">
                            <img
                                src="/newHome/body/development_5.png"
                                alt="Social and cultural influences"
                                class="card-image" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- The digital potential of Muslim women -->
        <div
            id="digital"
            class="digital"
            role="tabpanel"
            aria-labelledby="digital-tab">
            <div class="digital-content">
                <!-- 标题区域 -->
                <div class="digital-title-section">
                    <h2 class="digital-title">Digital Potential of Muslim Women</h2>
                    <p class="digital-description">
                        The total supply of FAWA Token is set at 900 million. This number holds
                        special symbolic meaning: it not only corresponds to the approximately 900
                        million Muslim women globally but also symbolizes the share and value that
                        women worldwide deserve in the digital economy
                    </p>
                </div>

                <!-- 主要内容区域 -->
                <div class="digital-main-content">
                    <!-- 左侧图片 -->
                    <div class="digital-image">
                        <img
                            src="/newHome/body/digital.png"
                            alt="Digital potential of Muslim women" />
                    </div>

                    <!-- 右侧文本框 -->
                    <div class="digital-text-box">
                        <p class="digital-text">
                            In the global female economic landscape, the Muslim female population is
                            a large and highly potential group. According to the latest population
                            data, the global Muslim population exceeds 1.9 billion, with women
                            comprising slightly more than half. With rising education levels and
                            internet penetration, Muslim women are gradually becoming a new force in
                            the digital economy
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- digital part2 -->
        <div
            id="digital-part2"
            class="digital-part2"
            role="tabpanel"
            aria-labelledby="digital-part2-tab">
            <div class="digital-part2-content">
                <div class="digital-part2-main">
                    <!-- 地球背景 -->
                    <div class="earth-background">
                        <img
                            src="/newHome/body/digital_part2_earth.png"
                            alt="Global digital connectivity"
                            class="earth-image" />
                    </div>

                    <!-- 三个特色卡片 -->
                    <div class="feature-cards">
                        <div class="feature-card card-1">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/digital_part2_1.png"
                                    alt="Digital Innovation"
                                    class="feature-image" />
                            </div>
                            <div class="card-content">
                                <h3 class="card-title">Social and Cultural Context</h3>
                                <p class="card-description">
                                    Traditionally, the social roles of Muslim women have been
                                    influenced by certain cultural and religious norms. However,
                                    driven by globalization, digitization, and policy reforms, this
                                    group is undergoing rapid transformation.
                                </p>
                            </div>
                        </div>

                        <div class="feature-card card-2">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/digital_part2_2.png"
                                    alt="Global Partnership"
                                    class="feature-image" />
                            </div>
                            <div class="card-content">
                                <h3 class="card-title">Current Situation of the Digital Economy</h3>
                                <div class="card-description">
                                    <div>. Consumption Potential</div>
                                    <div>. Social Potential</div>
                                    <div>. Entrepreneurial Potential</div>
                                </div>
                            </div>
                        </div>

                        <div class="feature-card card-3">
                            <div class="card-image">
                                <img
                                    src="/newHome/body/digital_part2_3.png"
                                    alt="Future Growth"
                                    class="feature-image" />
                            </div>
                            <div class="card-content">
                                <h3 class="card-title">Potential opportunities</h3>
                                <div class="card-description">
                                    <div>. Digital consumption</div>
                                    <div>. Digital identity</div>
                                    <div>. Community connection & assetization</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- The Beginning of FAWA -->
        <div
            id="the-beginning-of-fawa"
            class="the-beginning-of-fawa"
            role="tabpanel"
            aria-labelledby="the-beginning-of-fawa-tab">
            <div class="beginning-content">
                <!-- 左侧文本内容 -->
                <div class="text-section">
                    <h2 class="beginning-title">FAWA's Starting Point</h2>
                    <p class="beginning-description">
                        Wocute, a community platform for health and emotional exchange built for
                        global Muslim women. Wocute is dedicated to "building the largest online
                        ecosystem for Muslim women" and "ensuring every Muslim woman has Wocute on
                        her phone." Since its launch in 2020, it has provided services to Muslim
                        women in over 20 countries worldwide, with particularly prominent
                        performance in the Middle East; supporting multiple languages (English,
                        Arabic, Indonesian), it has created a women's health community platform
                        fostering deep cross-regional cultural connections. Wocute focuses on
                        women's health, growth, economy, AI applications, and empowerment. Through
                        sections like health tracking tools, personalized avatars, anonymous
                        confession/sharing, fun topics, tribe games, and sisterly support, by 2025,
                        its total downloads have reached 100 million, total registrations 60
                        million, with over 10 million active female users participating, making it a
                        phenomenal platform in the regional female community.
                    </p>
                </div>

                <!-- 背景图 -->
                <div class="background-image">
                    <img
                        src="/newHome/body/beginning-phone.png"
                        alt="The Beginning of FAWA Background"
                        class="bg-image" />
                </div>
            </div>
        </div>
        <!-- beginning part2 -->
        <div
            id="beginning-part2"
            class="beginning-part2"
            role="tabpanel"
            aria-labelledby="beginning-part2-tab">
            <div class="beginning-part2-content">
                <!-- 描述文本 -->
                <div class="beginning-part2-description">
                    <p class="description-text">
                        FAWA will build on the Wocute platform, through capital investment and
                        technological empowerment, to upgrade Wocute into a Muslim Web3 digital
                        social ecosystem platform
                    </p>
                </div>

                <!-- 四个特色卡片 -->
                <div class="feature-cards-container">
                    <!-- 卡片1：数字身份和隐私保护 -->
                    <div class="feature-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/beginning_part2_1.png"
                                alt="Provide secure digital identity and privacy protection"
                                class="feature-image" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">
                                Provide secure digital identity and privacy protection
                            </h3>
                            <p class="card-description">
                                Respecting religious and cultural specificities
                            </p>
                        </div>
                    </div>

                    <!-- 卡片2：数字经济场景 -->
                    <div class="feature-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/beginning_part2_2.png"
                                alt="Building a digital economy scenario that complies with Halal culture"
                                class="feature-image" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">
                                Construct digital economic scenarios in line with halal culture
                            </h3>
                            <p class="card-description">
                                With applications in industries such as fashion, beauty, education,
                                and healthcare
                            </p>
                        </div>
                    </div>

                    <!-- 卡片3：女性创业 -->
                    <div class="feature-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/beginning_part2_3.png"
                                alt="Promoting women's entrepreneurship"
                                class="feature-image" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">
                                Promote female entrepreneurship and asset on-chain
                            </h3>
                            <p class="card-description">
                                Helping Muslim women convert creativity, labor, and consumption
                                power into on-chain value
                            </p>
                        </div>
                    </div>

                    <!-- 卡片4：跨境社交网络 -->
                    <div class="feature-card">
                        <div class="card-image">
                            <img
                                src="/newHome/body/beginning_part2_4.png"
                                alt="Building a cross-border social network"
                                class="feature-image" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">Build a cross - border community network</h3>
                            <p class="card-description">
                                Enabling them to have a voice and governance rights in the global
                                female digital civilization
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- beginning part3 -->
        <div class="beginning-part3">
            <div class="beginning-part3-content">
                <div
                    class="card-item"
                    @click="openModal('card-1')">
                    <div class="card-background">
                        <img
                            src="/newHome/body/beginning-part3_1.png"
                            alt="Size and potential of the female group"
                            class="card-image" />
                    </div>
                    <div class="card-text">
                        <!-- <h3 class="card-title">Size and potential of the female group</h3> -->
                    </div>
                </div>

                <div
                    class="card-item"
                    @click="openModal('card-2')">
                    <div class="card-background">
                        <img
                            src="/newHome/body/beginning-part3_2.png"
                            alt="The bridge of Web2/3 digital civilization"
                            class="card-image" />
                    </div>
                    <div class="card-text">
                        <!-- <h3 class="card-title">The bridge of Web2/3 digital civilization</h3> -->
                    </div>
                </div>

                <div
                    class="card-item"
                    @click="openModal('card-3')">
                    <div class="card-background">
                        <img
                            src="/newHome/body/beginning-part3_3.png"
                            alt="Insights into future trends and needs"
                            class="card-image" />
                    </div>
                    <div class="card-text">
                        <!-- <h3 class="card-title">Insights into future trends and needs</h3> -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框组件 -->
        <CardModal
            :is-visible="isModalVisible"
            :card-type="selectedCardType"
            @close="closeModal" />
        <!-- Business model -->
        <div
            id="business-model"
            class="business-model"
            role="tabpanel"
            aria-labelledby="business-model-tab">
            <div class="business-model-content">
                <div class="business-model-header">
                    <h2 class="business-model-title">Business Model and Value Creation</h2>
                </div>

                <div class="business-cards-container">
                    <div
                        class="business-card card-1"
                        @click="openModal('business-1')">
                        <div class="card-icon">
                            <img
                                src="/newHome/body/business_1.png"
                                alt="Diversified income sources"
                                class="icon-image" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">Diversified Revenue Sources</h3>
                            <p class="card-description">
                                FAWA's business model does not rely solely on single token value but
                                constructs a diversified revenue system through platform
                                applications, financial services, infrastructure, and ecological
                                expansion, ensuring the platform's long-term sustainable development
                                capability
                            </p>
                        </div>
                        <div class="expand-button">
                            <img
                                src="/newHome/body/add_icon.png"
                                alt="Expand"
                                class="add-icon" />
                        </div>
                    </div>

                    <div
                        class="business-card card-2"
                        @click="openModal('business-2')">
                        <div class="card-icon">
                            <img
                                src="/newHome/body/business_2.png"
                                alt="Token appreciation logic"
                                class="icon-image" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">Token Value Appreciation Logic</h3>
                            <p class="card-description">
                                The value appreciation logic of the FAWA Token does not rely solely
                                on market speculation but forms a long-term value closed loop
                                through ecological scenario driving + financial mechanism design +
                                global strategy implementation
                            </p>
                        </div>
                        <div class="expand-button">
                            <img
                                src="/newHome/body/add_icon.png"
                                alt="Expand"
                                class="add-icon" />
                        </div>
                    </div>

                    <div
                        class="business-card card-3"
                        @click="openModal('business-3')">
                        <div class="card-icon">
                            <img
                                src="/newHome/body/business_3.png"
                                alt="Coin-stock linkage and financial innovation"
                                class="icon-image" />
                        </div>
                        <div class="card-content">
                            <h3 class="card-title">
                                Token - Stock Linkage and Financial Innovation
                            </h3>
                            <p class="card-description">
                                FAWA's goal is not merely to build a blockchain platform but to
                                serve as a bridge between digital assets and the traditional capital
                                market. In future development, FAWA will adopt the "token - stock
                                linkage" model, integrating the application value of the FAWA Token
                                with the financial value of the company's equity in the capital
                                market, thus forming a unique two - wheel - driven mechanism
                            </p>
                        </div>
                        <div class="expand-button">
                            <img
                                src="/newHome/body/add_icon.png"
                                alt="Expand"
                                class="add-icon" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Strategic blueprint -->
        <div
            id="strategic-blueprint"
            class="strategic-blueprint"
            role="tabpanel"
            aria-labelledby="strategic-blueprint-tab">
            <div class="strategic-blueprint-content">
                <div class="strategic-left">
                    <div class="strategic-header">
                        <h2 class="strategic-title">Global Strategic Blueprint</h2>
                    </div>
                    <div class="strategic-image">
                        <img
                            src="/newHome/body/strategic.png"
                            alt="Global Strategic Blueprint"
                            class="main-image" />
                    </div>
                </div>

                <div class="strategic-right">
                    <div class="strategic-cards">
                        <!-- 第一行：两个卡片 -->
                        <div class="card-row row-1">
                            <div
                                class="strategic-card card-1"
                                @click="openModal('strategic-1')">
                                <div class="card-icon">
                                    <img
                                        src="/newHome/body/strategic_icon_1.png"
                                        alt="Strategic development route"
                                        class="icon-image" />
                                </div>
                                <div class="card-content">
                                    <h3 class="card-title">Strategic Development Roadmap</h3>
                                    <p class="card-description">
                                        FAWA's development is to build a truly women-led global
                                        digital civilization platform
                                    </p>
                                </div>
                                <div class="expand-button">
                                    <img
                                        src="/newHome/body/add_icon.png"
                                        alt="Expand"
                                        class="add-icon" />
                                </div>
                            </div>

                            <div
                                class="strategic-card card-2"
                                @click="openModal('strategic-2')">
                                <div class="card-icon">
                                    <img
                                        src="/newHome/body/strategic_icon_2.png"
                                        alt="International expansion strategy"
                                        class="icon-image" />
                                </div>
                                <div class="card-content">
                                    <h3 class="card-title">International Expansion Strategy</h3>
                                    <p class="card-description">
                                        FAWA aims to build a global ecosystem centered around women
                                        and characterized by cross-regional co-construction and
                                        sharing
                                    </p>
                                </div>
                                <div class="expand-button">
                                    <img
                                        src="/newHome/body/add_icon.png"
                                        alt="Expand"
                                        class="add-icon" />
                                </div>
                            </div>
                        </div>

                        <!-- 第二行：单个卡片 -->
                        <div class="card-row row-2">
                            <div
                                class="strategic-card card-3"
                                @click="openModal('strategic-3')">
                                <div class="card-icon">
                                    <img
                                        src="/newHome/body/strategic_icon_3.png"
                                        alt="Ecological co-construction and cooperation"
                                        class="icon-image" />
                                </div>
                                <div class="card-content">
                                    <h3 class="card-title">
                                        Ecological co-construction and cooperation
                                    </h3>
                                    <p class="card-description">
                                        FAWA believes that a single platform cannot independently
                                        shape global women's digital civilization. It must form a
                                        sustainable open ecosystem through cross-border
                                        co-construction and multi-party cooperation
                                    </p>
                                </div>
                                <div class="expand-button">
                                    <img
                                        src="/newHome/body/add_icon.png"
                                        alt="Expand"
                                        class="add-icon" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted, onUnmounted, nextTick } from 'vue';
    import Banner from './Banner.vue';
    import CardModal from './CardModal.vue';
    import { useGlobalStore } from '~/store';

    const store = useGlobalStore();
    const isMobile = computed(() => store.deviceType === 'mobile');

    const activeTab = ref('about-fawa');
    const isSticky = ref(false);
    const tabNavRef = ref<HTMLElement | null>(null);
    const isModalVisible = ref(false);
    const selectedCardType = ref('card-1');
    let eventListeners: Array<{ element: Element | Window; handler: any }> = [];

    // mission - 支持 missionData 原本的配置
    const missionData = ref([
        {
            title: 'Empower the Community',
            image: '/newHome/body/mission_1.png',
            description:
                'Provide Muslim women with a safe, warm, and interactive digital harbor, alleviating loneliness and pressure, enabling them to express themselves freely, support each other, and achieve mutual success',
        },
        {
            title: 'Facilitate Value Flow',
            image: '/newHome/body/mission_2.png',
            description:
                "Through the digitization of FAWA Token and Real - World Assets (RWA), enable brands, services, and assets to collaborate freely on the blockchain, serving as the value engine of the Muslim women's economy",
        },
        {
            title: 'Promote Fairness and Equality',
            image: '/newHome/body/mission_3.png',
            description:
                'Through DAO(Decentralized Autonomous Organization) governance and incentive mechanisms, ensure Muslim women possess genuine governance rights, profit rights, and choice within the ecosystem',
        },
        {
            title: 'Global Consensus',
            image: '/newHome/body/mission_4.png',
            description:
                'Relying on the Wocute social platform and compliant licensed funds, comprehensively expand into the Middle East, Asian, European, and American markets, ultimately aiming for a listing on the US stock market',
        },
    ]);

    const handleTabClick = (target: string, event: Event) => {
        event.preventDefault();
        event.stopPropagation();

        // 防止重复点击同一个tab
        if (activeTab.value === target) {
            return;
        }

        // 移除所有active类并更新aria属性
        const allTabs = document.querySelectorAll('.tab-item');
        allTabs.forEach(tab => {
            tab.classList.remove('active');
            tab.setAttribute('aria-selected', 'false');
        });

        // 找到点击的元素或其父元素
        let clickedElement = event.target as HTMLElement;
        if (clickedElement.tagName === 'SPAN') {
            clickedElement = clickedElement.parentElement as HTMLElement;
        }

        // 给当前点击的tab添加active类并更新aria属性
        if (clickedElement) {
            clickedElement.classList.add('active');
            clickedElement.setAttribute('aria-selected', 'true');
        }

        // 更新响应式状态
        activeTab.value = target;

        // 锚点定位到对应的内容区域
        const targetElement = document.getElementById(target);
        if (targetElement) {
            // 计算tab栏的高度，用于偏移
            const tabElement = document.querySelector('.tab');
            const tabHeight = tabElement ? tabElement.getBoundingClientRect().height : 64;

            // 获取目标元素的位置
            const elementTop = targetElement.getBoundingClientRect().top + window.pageYOffset;

            // 平滑滚动到目标位置，减去tab栏高度
            window.scrollTo({
                top: elementTop - tabHeight - 20, // 额外20px的间距
                behavior: 'smooth',
            });
        }

        // 可选：触发自定义事件
        window.dispatchEvent(
            new CustomEvent('tabChanged', {
                detail: { activeTab: target, previousTab: activeTab.value },
            })
        );
    };

    const initTabEvents = () => {
        // 清除之前的事件监听器
        cleanupEventListeners();

        // 添加新的事件监听器
        const tabItems = document.querySelectorAll('.tab-item');
        tabItems.forEach((item, index) => {
            const clickHandler = (event: Event) => {
                const target = item.getAttribute('data-target');
                if (target) {
                    handleTabClick(target, event);
                }
            };

            const keydownHandler = (event: KeyboardEvent) => {
                const target = item.getAttribute('data-target');

                switch (event.key) {
                    case 'Enter':
                    case ' ':
                        event.preventDefault();
                        if (target) {
                            handleTabClick(target, event);
                        }
                        break;
                    case 'ArrowLeft':
                    case 'ArrowUp': {
                        event.preventDefault();
                        const prevIndex = index > 0 ? index - 1 : tabItems.length - 1;
                        (tabItems[prevIndex] as HTMLElement).focus();
                        break;
                    }
                    case 'ArrowRight':
                    case 'ArrowDown': {
                        event.preventDefault();
                        const nextIndex = index < tabItems.length - 1 ? index + 1 : 0;
                        (tabItems[nextIndex] as HTMLElement).focus();
                        break;
                    }
                    case 'Home':
                        event.preventDefault();
                        (tabItems[0] as HTMLElement).focus();
                        break;
                    case 'End':
                        event.preventDefault();
                        (tabItems[tabItems.length - 1] as HTMLElement).focus();
                        break;
                }
            };

            item.addEventListener('click', clickHandler);
            item.addEventListener('keydown', keydownHandler as any);

            // 添加到清理列表
            eventListeners.push(
                { element: item, handler: clickHandler },
                { element: item, handler: keydownHandler as any }
            );
        });
    };

    const cleanupEventListeners = () => {
        eventListeners.forEach(({ element, handler }) => {
            element.removeEventListener('click', handler);
            element.removeEventListener('keydown', handler);
        });
        eventListeners = [];
    };

    // 初始化吸顶导航功能
    const initStickyNav = () => {
        // 延迟执行，确保DOM完全渲染
        nextTick(() => {
            // 获取Banner元素的高度
            const bannerElement = document.querySelector('.banner');

            let bannerHeight = 1080; // 默认高度
            if (bannerElement) {
                bannerHeight = bannerElement.getBoundingClientRect().height;
            }

            // 滚动事件处理函数
            const handleStickyScroll = () => {
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                // 当滚动超过banner高度的50%时，激活吸顶效果
                const triggerPoint = bannerHeight * 0.5;

                const shouldBeSticky = scrollTop >= triggerPoint;

                if (shouldBeSticky !== isSticky.value) {
                    isSticky.value = shouldBeSticky;
                }
            };

            // 节流滚动事件，使用requestAnimationFrame优化性能
            let ticking = false;
            const throttledStickyScroll = () => {
                if (!ticking) {
                    requestAnimationFrame(() => {
                        handleStickyScroll();
                        ticking = false;
                    });
                    ticking = true;
                }
            };

            // 监听滚动事件
            window.addEventListener('scroll', throttledStickyScroll, { passive: true });

            // 监听窗口大小变化，重新计算banner高度
            const handleResize = () => {
                if (bannerElement) {
                    bannerHeight = bannerElement.getBoundingClientRect().height;
                    handleStickyScroll(); // 重新检查状态
                }
            };

            window.addEventListener('resize', handleResize, { passive: true });

            // 初始检查
            handleStickyScroll();

            // 清理函数
            const cleanupStickyScroll = () => {
                window.removeEventListener('scroll', throttledStickyScroll);
                window.removeEventListener('resize', handleResize);
            };

            // 添加到清理列表
            eventListeners.push({ element: window as any, handler: cleanupStickyScroll });
        });
    };

    // 模态框相关方法
    const openModal = (cardType: string) => {
        console.log('openModal', cardType);
        selectedCardType.value = cardType;
        isModalVisible.value = true;
    };

    const closeModal = () => {
        isModalVisible.value = false;
    };

    onMounted(() => {
        initTabEvents();
        initStickyNav();

        // 初始化tab的可访问性属性
        const tabItems = document.querySelectorAll('.tab-item');
        tabItems.forEach((item, index) => {
            // 设置基本可访问性属性
            item.setAttribute('tabindex', index === 0 ? '0' : '-1');
            item.setAttribute('role', 'tab');

            // 为每个tab添加唯一ID
            const target = item.getAttribute('data-target');
            if (target) {
                item.setAttribute('id', `${target}-tab`);
                item.setAttribute('aria-controls', target);
            }
        });

        // 添加滚动监听，实现自动高亮当前区域的tab
        const handleScroll = () => {
            const tabHeight = document.querySelector('.tab')?.getBoundingClientRect().height || 64;
            const scrollTop = window.pageYOffset;
            const windowHeight = window.innerHeight;

            // 获取所有内容区域
            const sections = [
                'about-fawa',
                'our-vision',
                'mission',
                'platform-core-value',
                'global-development-goals',
                'digital',
                'digital-part2',
                'the-beginning-of-fawa',
                'beginning-part2',
                'business-model',
                'strategic-blueprint',
            ];

            let currentSection = '';

            // 检查哪个区域在当前视口中
            for (const sectionId of sections) {
                const element = document.getElementById(sectionId);
                if (element) {
                    const rect = element.getBoundingClientRect();
                    const elementTop = rect.top;
                    const elementBottom = rect.bottom;

                    // 如果元素在视口中间部分显示，则认为是当前区域
                    if (elementTop <= tabHeight + 100 && elementBottom >= windowHeight * 0.3) {
                        currentSection = sectionId;
                        break;
                    }
                }
            }

            // 更新活跃tab
            if (currentSection && currentSection !== activeTab.value) {
                activeTab.value = currentSection;

                // 更新tab的视觉状态
                const allTabs = document.querySelectorAll('.tab-item');
                allTabs.forEach(tab => {
                    const target = tab.getAttribute('data-target');
                    if (target === currentSection) {
                        tab.classList.add('active');
                        tab.setAttribute('aria-selected', 'true');
                    } else {
                        tab.classList.remove('active');
                        tab.setAttribute('aria-selected', 'false');
                    }
                });
            }
        };

        // 节流滚动事件
        let scrollTimeout: any;
        const throttledScroll = () => {
            if (scrollTimeout) {
                clearTimeout(scrollTimeout);
            }
            scrollTimeout = setTimeout(handleScroll, 100);
        };

        window.addEventListener('scroll', throttledScroll);

        // 清理函数
        const cleanupScroll = () => {
            window.removeEventListener('scroll', throttledScroll);
            if (scrollTimeout) {
                clearTimeout(scrollTimeout);
            }
        };

        // 将清理函数添加到组件卸载时执行
        eventListeners.push({ element: window as any, handler: cleanupScroll });

        // 监听滚动事件，实现自动高亮当前区域的tab（可选功能）
        // 这里可以根据需要添加滚动监听逿辑
    });

    onUnmounted(() => {
        // 清理所有事件监听器
        eventListeners.forEach(({ element, handler }) => {
            if (element === window) {
                // 执行清理函数
                if (typeof handler === 'function') {
                    handler();
                }
            } else {
                element.removeEventListener('click', handler);
                element.removeEventListener('keydown', handler);
            }
        });
        eventListeners = [];
    });
</script>

<style lang="scss" scoped>
    .home-part-main {
        background-color: #ffffff;
    }
    .about-fawa {
        width: 100%;
        min-height: pxToRem(1080);
        background: #ffffff;
        position: relative;
        overflow: hidden;
        padding-top: pxToRem(80);

        &::before {
            content: '';
            position: absolute;
            top: pxToRem(-200);
            left: 50%;
            transform: translateX(-50%);
            width: pxToRem(2676);
            height: pxToRem(1120);
            background: radial-gradient(circle at 47% 49%, rgba(231, 204, 240, 0.2) 100%);
            filter: blur(200px);
            z-index: 0;
        }

        .about-fawa-content {
            position: relative;
            z-index: 1;
            max-width: pxToRem(1920);
            margin: 0 auto;
            padding: 0 pxToRem(180);
        }

        .about-title-section {
            text-align: center;
            margin-bottom: pxToRem(200);

            .about-title {
                font-family: 'SFProDisplayBlack';
                font-weight: 1000;
                font-size: pxToRem(60);
                line-height: 1.167;
                letter-spacing: -0.017em;
                color: #000000;
                margin: 0 0 pxToRem(17) 0;
            }

            .about-description {
                font-family: 'SFProDisplayLight';
                font-weight: 274;
                font-size: pxToRem(28);
                line-height: 1.193;
                color: rgba(0, 0, 0, 0.7);
                margin: 0;
                max-width: pxToRem(1564);
                text-align: center;
            }
        }

        // 四个层面横向滑动样式
        .four-levels-container {
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
            -webkit-overflow-scrolling: touch;
            padding: 0 pxToRem(20);
            margin: 0 pxToRem(-20);
            cursor: grab;

            &:active {
                cursor: grabbing;
            }

            // Windows 系统横向滚动优化
            &::-webkit-scrollbar {
                height: 8px;
                background: transparent;
            }

            &::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 4px;
                margin: 0 pxToRem(20);
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.3);
                border-radius: 4px;
                transition: background 0.3s ease;

                &:hover {
                    background: rgba(0, 0, 0, 0.5);
                }
            }

            // Firefox 滚动条优化
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
        }

        .four-levels-wrapper {
            display: flex;
            gap: pxToRem(74);
            align-items: flex-end;
            min-width: max-content;
            padding-bottom: pxToRem(20);
            height: pxToRem(634);
        }

        .level-card {
            flex-shrink: 0;
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
                transform: scale(1.1); // 放大10%
            }
            // 添加悬停效果
            transition: all 0.3s ease;
            cursor: pointer;

            &:nth-child(3) {
                height: pxToRem(632);
            }

            img {
                width: pxToRem(1200);
                height: auto;
                max-height: pxToRem(634);
                border-radius: pxToRem(20);
            }

            .card-image {
                position: absolute;
                bottom: pxToRem(63);
                left: pxToRem(3);
                width: pxToRem(575);
                height: pxToRem(387);
                border-top-left-radius: pxToRem(27);
                border-top-right-radius: pxToRem(27);
                z-index: 2;

                img {
                    margin-top: pxToRem(-215);
                    width: 100%;
                    height: pxToRem(600);
                    object-fit: contain;
                }
            }

            .card-content {
                position: absolute;
                right: pxToRem(48);
                top: pxToRem(220);
                width: pxToRem(533);
                z-index: 3;

                .card-number {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: 600;
                    font-size: pxToRem(41);
                    line-height: 0.826;
                    color: #000000;
                    margin-bottom: pxToRem(17);
                }

                .card-text {
                    .card-title {
                        font-family: 'Montserrat', sans-serif;
                        font-weight: 900;
                        font-size: pxToRem(38);
                        line-height: 1.238;
                        letter-spacing: -0.024em;
                        color: #000000;
                        margin: 0 0 pxToRem(17) 0;
                        width: pxToRem(524);
                    }

                    .card-description {
                        font-family: 'SFProDisplayLight';
                        font-weight: 274;
                        font-size: pxToRem(27);
                        line-height: 1.193;
                        color: rgba(0, 0, 0, 0.9);
                        margin: 0;
                        width: pxToRem(467);
                    }
                }
            }

            // 特定卡片的背景色和图片位置调整
            &:nth-child(1) {
                .card-image {
                    background: #dfedff;
                }
            }

            &:nth-child(2) {
                .card-image {
                    background: #ffecdf;
                    left: pxToRem(0);
                }

                .card-content {
                    .card-text .card-description {
                        font-size: pxToRem(28);
                        width: pxToRem(533);
                    }
                }
            }

            &:nth-child(3) {
                .card-image {
                    background: #dff4ff;
                }

                .card-content {
                    top: pxToRem(118);
                }
            }

            &:nth-child(4) {
                .card-image {
                    background: #ffecdf;
                }

                .card-content {
                    top: pxToRem(120);
                    .card-text .card-description {
                        font-size: pxToRem(28);
                        width: pxToRem(533);
                    }
                }
            }
        }
    }

    // About FAWA 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .about-fawa {
            min-height: pxToRem(900);

            &::before {
                top: pxToRem(-150);
                width: pxToRem(2200);
                height: pxToRem(950);
            }

            .about-fawa-content {
                padding: 0 pxToRem(120);
            }

            .four-levels-container {
                &::-webkit-scrollbar {
                    height: 6px;
                }

                &::-webkit-scrollbar-track {
                    margin: 0 pxToRem(15);
                }
            }

            .four-levels-wrapper {
                gap: pxToRem(48);
            }

            .level-card {
                img {
                    width: pxToRem(1000);
                    max-height: pxToRem(520);
                }
            }

            .about-title-section {
                margin-bottom: pxToRem(150);

                .about-title {
                    font-size: pxToRem(52);
                }

                .about-description {
                    font-size: pxToRem(24);
                    max-width: pxToRem(1300);
                }
            }

            .four-levels-wrapper {
                gap: pxToRem(48);
            }

            .level-card {
                width: pxToRem(1000);
                height: pxToRem(520);

                &:hover {
                    transform: scale(1.1); // 放大10%
                }
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:nth-child(3) {
                    height: pxToRem(518);
                }

                .card-background {
                    top: pxToRem(52);
                    height: pxToRem(468);
                    border-radius: pxToRem(16);
                }

                .card-image {
                    bottom: pxToRem(0);
                    width: pxToRem(470);
                    height: pxToRem(380);

                    img {
                        border-radius: pxToRem(22);
                    }
                }

                .card-content {
                    right: pxToRem(40);
                    top: pxToRem(200);
                    width: pxToRem(440);

                    .card-number {
                        font-size: pxToRem(34);
                        margin-bottom: pxToRem(14);
                    }

                    .card-text {
                        .card-title {
                            font-size: pxToRem(32);
                            margin: 0 0 pxToRem(14) 0;
                            width: pxToRem(430);
                        }

                        .card-description {
                            font-size: pxToRem(22);
                            width: pxToRem(380);
                        }
                    }
                }

                &:nth-child(2) {
                    .card-image {
                    }

                    .card-content {
                        .card-text .card-description {
                            font-size: pxToRem(23);
                            width: pxToRem(440);
                        }
                    }
                }

                &:nth-child(3) {
                    .card-image {
                    }

                    .card-content {
                    }
                }

                &:nth-child(4) {
                    .card-image {
                    }

                    .card-content {
                        .card-text .card-description {
                            font-size: pxToRem(23);
                            width: pxToRem(440);
                        }
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .about-fawa {
            min-height: pxToRem(750);

            &::before {
                top: pxToRem(-120);
                width: pxToRem(1800);
                height: pxToRem(800);
            }

            .about-fawa-content {
                padding: 0 pxToRem(80);
            }

            .four-levels-container {
                &::-webkit-scrollbar {
                    height: 5px;
                }
            }

            .four-levels-wrapper {
                gap: pxToRem(36);
            }

            .level-card {
                img {
                    width: pxToRem(850);
                    max-height: pxToRem(440);
                }
            }

            .about-title-section {
                margin-bottom: pxToRem(120);

                .about-title {
                    font-size: pxToRem(48);
                }

                .about-description {
                    font-size: pxToRem(22);
                    max-width: pxToRem(1100);
                }
            }
        }
    }

    // 1024px 中等屏幕断点 - 新增
    @media (max-width: 1024px) and (min-width: 769px) {
        .about-fawa {
            min-height: pxToRem(750);
            padding-top: pxToRem(60);

            &::before {
                top: pxToRem(-100);
                width: pxToRem(1600);
                height: pxToRem(700);
                filter: blur(150px);
            }

            .about-fawa-content {
                padding: 0 pxToRem(60);
                max-width: pxToRem(1024);
            }

            .about-title-section {
                margin-bottom: pxToRem(100);

                .about-title {
                    font-size: pxToRem(44);
                }

                .about-description {
                    font-size: pxToRem(20);
                    max-width: pxToRem(900);
                }
            }

            .four-levels-container {
                &::-webkit-scrollbar {
                    height: 5px;
                }
            }

            .four-levels-wrapper {
                gap: pxToRem(32);
            }

            .level-card {
                &:hover {
                    transform: translateY(-4px) scale(1.02);
                }

                img {
                    width: pxToRem(750);
                    max-height: pxToRem(380);
                    border-radius: pxToRem(16);
                    object-fit: contain;
                }

                // 移除桌面端的卡片内容样式
                .card-image,
                .card-content,
                .card-background {
                    display: none;
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .about-fawa {
            min-height: auto;
            padding: pxToRem75(60) 0;

            &::before {
                top: pxToRem75(-80);
                width: pxToRem75(900);
                height: pxToRem75(500);
                filter: blur(100px);
            }

            .about-fawa-content {
                padding: 0 pxToRem75(20);
            }

            .four-levels-container {
                margin: 0;
                padding: 0;
                overflow-x: visible;
                overflow-y: visible;

                // 移除桌面端的横向滚动样式
                &::-webkit-scrollbar {
                    display: none;
                }

                cursor: default;

                &:active {
                    cursor: default;
                }
            }

            .four-levels-wrapper {
                display: flex;
                flex-direction: column;
                gap: pxToRem75(24);
                align-items: center;
                min-width: auto;
                padding: 0;
                height: auto;
            }

            .level-card {
                width: 100%;
                max-width: 100%;
                position: relative;
                flex-shrink: 0;

                // 移除桌面端的特殊高度设置
                height: auto;

                &:nth-child(3) {
                    height: auto;
                }

                &:hover {
                    transform: translateY(-2px);
                }

                // 移除桌面端的复杂样式
                transition: all 0.3s ease;
                cursor: pointer;

                img {
                    width: 100%;
                    height: auto;
                    border-radius: pxToRem75(12);
                    box-shadow: 0 pxToRem75(4) pxToRem75(20) rgba(0, 0, 0, 0.08);
                    object-fit: contain;
                    display: block;
                }

                // 移除桌面端的卡片内容样式
                .card-image,
                .card-content,
                .card-background {
                    display: none;
                }
            }

            .about-title-section {
                margin-bottom: pxToRem75(60);

                .about-title {
                    font-size: pxToRem75(50);
                    line-height: 1.2;
                }

                .about-description {
                    font-size: pxToRem75(20);
                    line-height: 1.4;
                    max-width: pxToRem75(710);
                }
            }
        }
    }

    .our-vision {
        width: 100%;
        min-height: pxToRem(1080);
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;

        .our-vision-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(82);
            max-width: pxToRem(1920);
            margin: 0 auto;
            padding: 0 pxToRem(180);
        }

        .vision-title-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(17);
            width: pxToRem(1200);

            .vision-title {
                font-family: 'SFProDisplayBlack';
                font-weight: 1000;
                font-size: pxToRem(60);
                line-height: 1.167;
                letter-spacing: -0.017em;
                color: #000000;
                margin: 0;
                text-align: center;
                width: 100%;
            }

            .vision-description {
                font-family: 'SFProDisplayLight';
                font-weight: 274;
                font-size: pxToRem(28);
                line-height: 1.193;
                color: rgba(0, 0, 0, 0.7);
                margin: 0;
                width: pxToRem(1564);
                text-align: center;
            }
        }

        .vision-cards-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .vision-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: pxToRem(300);
            height: pxToRem(660);

            .card-image {
                width: 100%;
                height: pxToRem(420);
                border-radius: pxToRem(20);
                box-shadow: 0 pxToRem(4) pxToRem(80) rgba(0, 0, 0, 0.04);
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .card-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 90%;

                .card-title {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 700;
                    font-size: pxToRem(32);
                    line-height: 1;
                    color: #12141d;
                    margin-bottom: pxToRem(20);

                    text-align: center;
                }

                .card-description {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 400;
                    font-size: pxToRem(24);
                    line-height: 1.083;
                    color: #12141d;
                    opacity: 0.7;
                    margin: 0;
                    text-align: center;
                }
            }
        }
    }

    // Vision 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .our-vision {
            min-height: pxToRem(900);

            .our-vision-content {
                gap: pxToRem(70);
                padding: 0 pxToRem(120);
            }

            .vision-title-section {
                gap: pxToRem(14);
                width: pxToRem(1000);

                .vision-title {
                    font-size: pxToRem(52);
                }

                .vision-description {
                    font-size: pxToRem(24);
                    width: pxToRem(1300);
                }
            }

            .vision-cards-container {
                width: pxToRem(1300);
                gap: pxToRem(10);
                flex-wrap: wrap;
                justify-content: center;
            }

            .vision-card {
                width: pxToRem(300);
                height: pxToRem(550);
                gap: pxToRem(24);

                .card-image {
                    height: pxToRem(350);
                    border-radius: pxToRem(16);
                }

                .card-content {
                    width: 100%;
                    .card-title {
                        font-size: pxToRem(26);
                    }

                    .card-description {
                        font-size: pxToRem(20);
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .our-vision {
            min-height: pxToRem(800);

            .our-vision-content {
                gap: pxToRem(60);
                padding: 0 pxToRem(80);
            }

            .vision-title-section {
                gap: pxToRem(12);
                width: pxToRem(900);

                .vision-title {
                    font-size: pxToRem(50);
                }

                .vision-description {
                    font-size: pxToRem(22);
                    width: pxToRem(800);
                }
            }

            .vision-cards-container {
                width: pxToRem(800);
                flex-wrap: wrap;
                justify-content: center;
            }

            .vision-card {
                width: pxToRem(280);
                height: pxToRem(480);
                margin: 0 pxToRem(50);

                .card-image {
                    height: pxToRem(300);
                    border-radius: pxToRem(14);
                }

                .card-content {
                    gap: pxToRem(12);

                    .card-title {
                        font-size: pxToRem(24);
                        width: pxToRem(280);
                    }

                    .card-description {
                        font-size: pxToRem(18);
                        width: pxToRem(270);
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .our-vision {
            min-height: auto;
            padding: pxToRem75(60) 0;

            .our-vision-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(20);
            }

            .vision-title-section {
                gap: pxToRem75(16);
                width: 100%;

                .vision-title {
                    font-size: pxToRem75(40);
                    line-height: 1.2;
                }

                .vision-description {
                    font-size: pxToRem75(20);
                    line-height: 1.4;
                    width: 100%;
                    max-width: pxToRem75(600);
                }
            }

            .vision-cards-container {
                flex-direction: column;
                gap: pxToRem75(32);
                align-items: center;
                width: 100%;
            }

            .vision-card {
                width: 100%;
                max-width: pxToRem75(600);
                height: auto;
                border-radius: pxToRem75(100);
                overflow: hidden;
                gap: pxToRem75(20);

                .card-image {
                    width: 100%;
                    height: pxToRem75(400);
                    border-radius: pxToRem75(100);
                    img {
                        border-radius: pxToRem75(100);
                    }
                }

                .card-content {
                    gap: pxToRem75(12);
                    padding: 0 pxToRem75(16);
                    text-align: center;

                    .card-title {
                        font-size: pxToRem75(24);
                        line-height: 1.3;
                        width: 100%;
                        margin-bottom: 0;
                    }

                    .card-description {
                        font-size: pxToRem75(18);
                        line-height: 1.4;
                        width: 100%;
                    }
                }
            }
        }
    }

    .mission {
        width: 100%;
        min-height: pxToRem(1080);
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;

        .mission-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(82);
            max-width: pxToRem(1920);
            margin: 0 auto;
            padding: 0 pxToRem(180);
        }

        .mission-title-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(17);
            width: pxToRem(1564);

            .mission-title {
                font-family: 'SFProDisplayBlack';
                font-weight: 1000;
                font-size: pxToRem(60);
                line-height: 1.167;
                letter-spacing: -0.017em;
                color: #000000;
                margin: 0;
                text-align: center;
                width: 100%;
            }

            .mission-description {
                font-family: 'SFProDisplayLight';
                font-weight: 274;
                font-size: pxToRem(28);
                line-height: 1.193;
                color: rgba(0, 0, 0, 0.7);
                margin: 0;
                width: pxToRem(1564);
                text-align: center;
            }
        }

        .mission-cards-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: pxToRem(20);
            width: pxToRem(1560);
        }

        .mission-card {
            position: relative;
            border-radius: pxToRem(20);
            overflow: hidden;

            &.large {
                width: pxToRem(530);
                height: pxToRem(553);

                .card-background {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(
                        135deg,
                        rgba(255, 255, 255, 0.65),
                        rgba(255, 151, 213, 0.65)
                    );

                    .background-image {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        opacity: 0.4;
                    }
                }

                .card-content {
                    position: relative;
                    z-index: 2;
                    padding: pxToRem(40);
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: pxToRem(236);

                    .card-title {
                        font-family: 'SFProDisplayBlack';
                        font-weight: 1000;
                        font-size: pxToRem(32);
                        line-height: 1.193;
                        color: #ffffff;
                        margin: 0;
                        text-align: left;
                        width: 100%;
                    }

                    .card-description {
                        font-family: 'SFProDisplayRegular';
                        font-weight: 400;
                        font-size: pxToRem(30);
                        line-height: 1.193;
                        color: rgba(255, 255, 255, 0.9);
                        margin: 0;
                        text-align: left;
                        width: 100%;
                    }
                }
            }

            &.small {
                width: pxToRem(310);
                height: pxToRem(553);

                .card-background {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(255, 255, 255, 0.65);

                    .background-image {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        // opacity: 0.3;
                    }
                }

                .card-content {
                    position: relative;
                    z-index: 2;
                    padding: pxToRem(40);
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: pxToRem(236);

                    .card-title {
                        font-family: 'SFProDisplayBold';
                        font-weight: 700;
                        font-size: pxToRem(32);
                        line-height: 1.193;
                        color: rgba(0, 0, 0, 0.9);
                        margin: 0;
                        text-align: left;
                        width: pxToRem(205);
                    }
                }
            }
        }
    }

    // Mission 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .mission {
            min-height: pxToRem(900);

            .mission-content {
                gap: pxToRem(70);
                padding: 0 pxToRem(120);
            }

            .mission-title-section {
                gap: pxToRem(14);
                width: pxToRem(1300);

                .mission-title {
                    font-size: pxToRem(52);
                }

                .mission-description {
                    font-size: pxToRem(24);
                    width: pxToRem(1300);
                }
            }

            .mission-cards-container {
                gap: pxToRem(16);
                width: pxToRem(1300);
                flex-wrap: wrap;
                justify-content: center;
            }

            .mission-card {
                border-radius: pxToRem(16);

                &.large {
                    width: pxToRem(440);
                    height: pxToRem(460);

                    .card-content {
                        padding: pxToRem(32);
                        gap: pxToRem(200);

                        .card-title {
                            font-size: pxToRem(26);
                        }

                        .card-description {
                            font-size: pxToRem(24);
                        }
                    }
                }

                &.small {
                    width: pxToRem(260);
                    height: pxToRem(460);

                    .card-content {
                        padding: pxToRem(32);
                        gap: pxToRem(200);

                        .card-title {
                            font-size: pxToRem(26);
                            width: pxToRem(170);
                        }
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1000px) {
        .mission {
            min-height: pxToRem(800);

            .mission-content {
                gap: pxToRem(60);
                padding: 0 pxToRem(80);
            }

            .mission-title-section {
                gap: pxToRem(12);
                width: pxToRem(800);

                .mission-title {
                    font-size: pxToRem(48);
                }

                .mission-description {
                    font-size: pxToRem(22);
                    width: pxToRem(800);
                }
            }

            .mission-cards-container {
                gap: pxToRem(12);
                width: pxToRem(800);
                flex-wrap: wrap;
                justify-content: center;
            }

            .mission-card {
                border-radius: pxToRem(14);

                &.large {
                    width: pxToRem(380);
                    height: pxToRem(400);
                    padding: 0 pxToRem(200);

                    .card-content {
                        padding: pxToRem(28);
                        gap: pxToRem(170);

                        .card-title {
                            font-size: pxToRem(24);
                        }

                        .card-description {
                            font-size: pxToRem(20);
                        }
                    }
                }

                &.small {
                    width: pxToRem(220);
                    height: pxToRem(400);

                    .card-content {
                        padding: pxToRem(28);
                        gap: pxToRem(170);

                        .card-title {
                            font-size: pxToRem(24);
                            width: pxToRem(150);
                        }
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .mission {
            min-height: auto;
            padding: pxToRem75(60) 0;

            .mission-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(0) !important;
            }

            .functional-positioning-component {
                width: 100%;
            }

            .mission-title-section {
                gap: pxToRem75(16);
                width: 100%;

                .mission-title {
                    font-size: pxToRem75(50);
                    line-height: 1.2;
                }

                .mission-description {
                    font-size: pxToRem75(24);
                    line-height: 1.4;
                    width: 100%;
                    max-width: pxToRem75(710);
                }
            }
        }
    }

    .platform-core-value {
        width: 100%;
        min-height: pxToRem(1080);
        padding: pxToRem(82) 0;
        margin: pxToRem(60) 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .platform-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(82);
            max-width: pxToRem(1920);
            margin: 0 auto;
            padding: 0 pxToRem(180);
        }

        .platform-title-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(17);
            width: pxToRem(1564);

            .platform-title {
                font-family: 'SFProDisplayBlack';
                font-weight: 1000;
                font-size: pxToRem(60);
                line-height: 1.167;
                letter-spacing: -0.017em;
                color: #000000;
                margin: 0;
                text-align: center;
                width: 100%;
            }

            .platform-description {
                font-family: 'SFProDisplayLight';
                font-weight: 274;
                font-size: pxToRem(28);
                line-height: 1.193;
                color: rgba(0, 0, 0, 0.7);
                margin: 0;
                width: pxToRem(1564);
                text-align: center;
            }
        }

        .platform-cards-container {
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
            -webkit-overflow-scrolling: touch;
            padding: pxToRem(10) pxToRem(20) pxToRem(40);
            margin: 0 pxToRem(-20);
            cursor: grab;
            width: 100%;
            max-width: pxToRem(1920);

            &:active {
                cursor: grabbing;
            }

            // Windows 系统横向滚动优化
            &::-webkit-scrollbar {
                height: 8px;
                background: transparent;
            }

            &::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 4px;
                margin: 0 pxToRem(20);
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.3);
                border-radius: 4px;

                &:hover {
                    background: rgba(0, 0, 0, 0.5);
                }
            }

            // Firefox 滚动条优化
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
        }

        .platform-cards-wrapper {
            display: flex;
            gap: pxToRem(30);
            min-width: max-content;
            padding: pxToRem(20) 0;
            align-items: center;
        }

        .platform-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: pxToRem(415);
            height: pxToRem(773);
            flex-shrink: 0;
            position: relative;
            // 添加悬停效果
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
                transform: scale(1.1); // 放大10%
            }

            .card-image {
                width: 100%;
                height: 100%;
                border-radius: pxToRem(20);
                overflow: hidden;
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .card-content {
                position: absolute;
                bottom: pxToRem(40);
                left: pxToRem(40);
                right: pxToRem(40);
                color: white;
                text-align: left;

                .card-title {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 700;
                    font-size: pxToRem(42);
                    line-height: 1.2;
                    color: #12141d;
                    margin: 0 0 pxToRem(7) 0;
                    width: 100%;
                }

                .card-description {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 400;
                    font-size: pxToRem(24);
                    line-height: 1.4;
                    color: rgba(18, 20, 29, 0.7);
                    margin: 0;
                    width: 100%;
                }
            }

            // 特定卡片的文字颜色调整
            &:nth-child(2) .card-content .card-title,
            &:nth-child(4) .card-content .card-title {
                color: #ffffff;
            }

            &:nth-child(2) .card-content .card-description,
            &:nth-child(4) .card-content .card-description {
                color: rgba(255, 255, 255, 0.9);
            }
        }
    }

    // Core Value 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .platform-core-value {
            min-height: pxToRem(900);
            padding: pxToRem(70) 0;

            .platform-content {
                gap: pxToRem(70);
                padding: 0 pxToRem(120);
            }

            .platform-title-section {
                gap: pxToRem(14);
                width: pxToRem(1300);

                .platform-title {
                    font-size: pxToRem(52);
                }

                .platform-description {
                    font-size: pxToRem(24);
                    width: pxToRem(1300);
                }
            }

            .platform-cards-container {
                max-width: pxToRem(1300);

                &::-webkit-scrollbar {
                    height: 6px;
                }

                &::-webkit-scrollbar-track {
                    margin: 0 pxToRem(15);
                }
            }

            .platform-cards-wrapper {
                gap: pxToRem(24);
                padding: 0 pxToRem(60);
                flex-wrap: nowrap;
                justify-content: center;
            }

            .platform-card {
                width: pxToRem(300);
                height: pxToRem(600);
                gap: pxToRem(10);
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                    transform: scale(1.1); // 放大10%
                }

                .card-image {
                    border-radius: pxToRem(16);
                }

                .card-content {
                    bottom: pxToRem(32);
                    left: pxToRem(32);
                    right: pxToRem(32);

                    .card-title {
                        font-size: pxToRem(36);
                        margin: 0 0 pxToRem(6) 0;
                    }

                    .card-description {
                        font-size: pxToRem(20);
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .platform-core-value {
            min-height: pxToRem(800);
            padding: pxToRem(60) 0;

            .platform-content {
                gap: pxToRem(60);
                padding: 0 pxToRem(80);
            }

            .platform-title-section {
                gap: pxToRem(12);
                width: pxToRem(1100);

                .platform-title {
                    font-size: pxToRem(48);
                }

                .platform-description {
                    font-size: pxToRem(22);
                    width: pxToRem(1100);
                }
            }

            .platform-cards-container {
                max-width: pxToRem(900);

                &::-webkit-scrollbar {
                    height: 5px;
                }
            }

            .platform-cards-wrapper {
                gap: pxToRem(24);
                padding: 0 pxToRem(60);
                flex-wrap: nowrap;
                justify-content: center;
            }

            .platform-card {
                width: pxToRem(300);
                height: pxToRem(500);
                gap: pxToRem(20);
                flex: 0 0 calc(50% - pxToRem(12));
                max-width: pxToRem(320);
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                    transform: scale(1.1); // 放大10%
                }

                .card-image {
                    border-radius: pxToRem(14);
                }

                .card-content {
                    bottom: pxToRem(24);
                    left: pxToRem(24);
                    right: pxToRem(24);

                    .card-title {
                        font-size: pxToRem(28);
                        margin: 0 0 pxToRem(5) 0;
                    }

                    .card-description {
                        font-size: pxToRem(18);
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .platform-core-value {
            min-height: auto;
            padding: pxToRem75(60) 0;
            margin: 0;

            .platform-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(20);
            }

            .platform-title-section {
                gap: pxToRem75(16);
                width: 100%;

                .platform-title {
                    font-size: pxToRem75(40);
                    line-height: 1.2;
                }

                .platform-description {
                    font-size: pxToRem75(24);
                    line-height: 1.4;
                    width: 100%;
                    max-width: pxToRem75(710);
                }
            }

            .platform-cards-container {
                margin: 0;
                padding: 0;
                overflow-x: visible;
                overflow-y: visible;

                // 移除桌面端的横向滚动样式
                &::-webkit-scrollbar {
                    display: none;
                }

                cursor: default;

                &:active {
                    cursor: default;
                }
            }

            .platform-cards-wrapper {
                flex-direction: column;
                gap: pxToRem75(32);
                align-items: center;
                padding: 0;
                min-width: auto;
            }

            .platform-card {
                width: 100%;
                // max-width: pxToRem75(800);
                height: auto;
                gap: 0;
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                    transform: none; // 放大10%
                }

                .card-image {
                    border-radius: pxToRem75(20);

                    img {
                        object-fit: initial;
                    }
                }

                .card-content {
                    bottom: pxToRem75(20);
                    left: pxToRem75(20);
                    right: pxToRem75(20);

                    .card-title {
                        font-size: pxToRem75(20);
                        line-height: 1.3;
                        margin: 0 0 pxToRem75(4) 0;
                    }

                    .card-description {
                        font-size: pxToRem75(14);
                        line-height: 1.4;
                    }
                }
            }
        }
    }

    .global-development-goals {
        width: 100%;
        height: pxToRem(1080);
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        padding: pxToRem(60) 0;

        .global-development-content {
            width: 100%;
            max-width: pxToRem(1920);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(82);

            .global-development-title-section {
                width: pxToRem(1564);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: pxToRem(17);

                .global-development-title {
                    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
                    font-weight: 1000;
                    font-size: pxToRem(60);
                    line-height: 1.1666666666666667em;
                    letter-spacing: -1.6666666666666667%;
                    text-align: center;
                    color: #000000;
                    margin: 0;
                    width: 100%;
                }

                .global-development-description {
                    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
                    font-weight: 274;
                    font-size: pxToRem(28);
                    line-height: 1.193359375em;
                    text-align: center;
                    color: rgba(0, 0, 0, 0.7);
                    margin: 0;
                    width: pxToRem(1564);
                }
            }

            .global-development-cards {
                display: flex;
                flex-direction: column;
                gap: pxToRem(20);
                align-items: center;

                .cards-row {
                    display: flex;
                    gap: pxToRem(20);
                    align-items: center;
                    justify-content: center;

                    &.first-row {
                        // 第一行：1个宽卡片 + 1个普通卡片
                        .development-card {
                            &.card-wide {
                                width: pxToRem(1033);
                                height: pxToRem(280);
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }

                            &.card-normal {
                                width: pxToRem(506);
                                height: pxToRem(280);
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }
                    }

                    &.second-row {
                        // 第二行：3个普通卡片
                        .development-card {
                            &.card-normal {
                                width: pxToRem(506);
                                height: pxToRem(280);
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }
                    }

                    .development-card {
                        position: relative;
                        border-radius: pxToRem(20);
                        overflow: hidden;
                        cursor: pointer;
                        transition: transform 0.3s ease;

                        &:hover {
                            transform: translateY(pxToRem(-5));
                        }
                    }
                }
            }
        }
    }

    // Global Development Goals 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .global-development-goals {
            height: pxToRem(900);

            .global-development-content {
                gap: pxToRem(70);
                max-width: pxToRem(1440);
                padding: 0 pxToRem(120);

                .global-development-title-section {
                    width: pxToRem(1300);

                    .global-development-title {
                        font-size: pxToRem(52);
                    }

                    .global-development-description {
                        font-size: pxToRem(24);
                        width: pxToRem(1300);
                    }
                }

                .global-development-cards {
                    gap: pxToRem(16);

                    .cards-row {
                        gap: pxToRem(16);

                        &.first-row {
                            .development-card {
                                &.card-wide {
                                    width: pxToRem(850);
                                    height: pxToRem(240);
                                }

                                &.card-normal {
                                    width: pxToRem(420);
                                    height: pxToRem(240);
                                }
                            }
                        }

                        &.second-row {
                            .development-card {
                                &.card-normal {
                                    width: pxToRem(420);
                                    height: pxToRem(240);
                                }
                            }
                        }

                        .development-card {
                            .card-content {
                                padding: pxToRem(20);

                                .card-title {
                                    font-size: pxToRem(28);
                                    max-width: pxToRem(350);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .global-development-goals {
            height: pxToRem(800);

            .global-development-content {
                gap: pxToRem(60);
                max-width: pxToRem(1200);
                padding: 0 pxToRem(80);

                .global-development-title-section {
                    width: pxToRem(1000);

                    .global-development-title {
                        font-size: pxToRem(48);
                    }

                    .global-development-description {
                        font-size: pxToRem(22);
                        width: pxToRem(1000);
                    }
                }

                .global-development-cards {
                    .cards-row {
                        flex-direction: column;
                        gap: pxToRem(16);
                        width: 100%;

                        &.first-row {
                            .development-card {
                                &.card-wide {
                                    width: pxToRem(800);
                                    height: pxToRem(200);
                                }
                                &.card-normal {
                                    width: pxToRem(400);
                                    height: pxToRem(200);
                                }
                            }
                        }

                        &.second-row {
                            flex-direction: row;
                            gap: pxToRem(12);

                            .development-card {
                                &.card-normal {
                                    width: pxToRem(320);
                                    height: pxToRem(180);
                                }
                            }
                        }

                        .development-card {
                            .card-content {
                                padding: pxToRem(18);

                                .card-title {
                                    font-size: pxToRem(24);
                                    max-width: pxToRem(280);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .global-development-goals {
            height: auto;
            padding: pxToRem75(60) 0;

            .global-development-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(30);

                .global-development-title-section {
                    width: 100%;

                    .global-development-title {
                        font-size: pxToRem75(40);
                        line-height: 1.2;
                    }

                    .global-development-description {
                        font-size: pxToRem75(26);
                        line-height: 1.4;
                        width: 100%;
                        text-align: center;
                    }
                }

                .global-development-cards {
                    gap: pxToRem75(16);
                    width: 100%;

                    .cards-row {
                        flex-direction: column;
                        gap: pxToRem75(16);
                        width: 100%;

                        &.first-row {
                            .development-card {
                                &.card-wide {
                                    width: 100%;
                                    height: auto;
                                }

                                &.card-normal {
                                    width: 100%;
                                    height: auto;
                                }
                            }
                        }
                        &.second-row {
                            .development-card {
                                &.card-wide,
                                &.card-normal {
                                    width: 100%;
                                    // max-width: pxToRem75(400);
                                    height: auto;
                                }
                            }
                        }

                        .development-card {
                            border-radius: pxToRem75(12);
                            &:hover {
                                transform: none;
                            }
                        }
                    }
                }
            }
        }
    }

    .digital {
        width: 100%;
        min-height: pxToRem(980);
        background: #ffffff;
        padding: pxToRem(94) 0;
        margin: pxToRem(60) 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .digital-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(82);
            max-width: pxToRem(1920);
            margin: 0 auto;
            padding: 0 pxToRem(180);
        }

        .digital-title-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(17);
            width: pxToRem(1200);

            .digital-title {
                font-family: 'SFProDisplayBlack';
                font-weight: 1000;
                font-size: pxToRem(60);
                line-height: 1.167;
                letter-spacing: -0.017em;
                color: #000000;
                margin: 0;
                text-align: center;
                width: 100%;
            }

            .digital-description {
                font-family: 'SFProDisplayLight';
                font-weight: 274;
                font-size: pxToRem(28);
                line-height: 1.193;
                color: rgba(0, 0, 0, 0.7);
                margin: 0;
                width: pxToRem(1564);
                text-align: center;
            }
        }

        .digital-main-content {
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
            max-width: pxToRem(1560);
        }

        .digital-image {
            width: pxToRem(914);
            height: pxToRem(514);
            border-radius: pxToRem(20);
            overflow: hidden;
            flex-shrink: 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .digital-text-box {
            width: pxToRem(646);
            height: pxToRem(514);
            background: rgba(255, 255, 255, 0.65);
            border: 3px solid #ffffff;
            border-radius: 0 pxToRem(28) pxToRem(28) 0;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: pxToRem(40);
            box-sizing: border-box;

            .digital-text {
                font-family: 'Figtree', sans-serif;
                font-weight: 300;
                font-size: pxToRem(30);
                line-height: 1.2;
                color: rgba(0, 0, 0, 0.7);
                margin: 0;
                width: pxToRem(560);
                text-align: left;
            }
        }
    }

    // Digital 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .digital {
            min-height: pxToRem(850);
            padding: pxToRem(80) 0;
            margin: pxToRem(50) 0;

            .digital-content {
                gap: pxToRem(70);
                padding: 0 pxToRem(120);
                max-width: pxToRem(1440);
            }

            .digital-title-section {
                width: pxToRem(1000);

                .digital-title {
                    font-size: pxToRem(52);
                }

                .digital-description {
                    font-size: pxToRem(24);
                    width: pxToRem(1300);
                }
            }

            .digital-main-content {
                max-width: pxToRem(1300);
            }

            .digital-image {
                width: pxToRem(780);
                height: pxToRem(440);
                border-radius: pxToRem(16);

                img {
                    object-fit: cover;
                }
            }

            .digital-text-box {
                width: pxToRem(520);
                height: pxToRem(440);
                border-radius: 0 pxToRem(24) pxToRem(24) 0;
                padding: pxToRem(32);

                .digital-text {
                    font-size: pxToRem(26);
                    width: pxToRem(450);
                    line-height: 1.3;
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .digital {
            min-height: pxToRem(750);
            padding: pxToRem(70) 0;
            margin: pxToRem(40) 0;

            .digital-content {
                gap: pxToRem(60);
                padding: 0 pxToRem(80);
                max-width: pxToRem(1200);
            }

            .digital-title-section {
                width: pxToRem(900);

                .digital-title {
                    font-size: pxToRem(48);
                }

                .digital-description {
                    font-size: pxToRem(22);
                    width: pxToRem(1000);
                }
            }

            .digital-main-content {
                flex-direction: column;
                gap: pxToRem(30);
                max-width: pxToRem(800);
            }

            .digital-image {
                width: 100%;
                max-width: pxToRem(800);
                height: pxToRem(360);
                border-radius: pxToRem(16);

                img {
                    object-fit: cover;
                }
            }

            .digital-text-box {
                width: 100%;
                max-width: pxToRem(800);
                height: auto;
                min-height: pxToRem(200);
                border-radius: pxToRem(16);
                padding: pxToRem(30);

                .digital-text {
                    font-size: pxToRem(20);
                    width: 100%;
                    line-height: 1.4;
                    text-align: center;
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .digital {
            min-height: auto;
            padding: pxToRem75(0) 0;
            margin: pxToRem75(30) 0;

            .digital-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(30);
            }

            .digital-title-section {
                width: 100%;

                .digital-title {
                    font-size: pxToRem75(40);
                    line-height: 1.2;
                }

                .digital-description {
                    font-size: pxToRem75(24);
                    line-height: 1.4;
                    width: 100%;
                    text-align: center;
                }
            }

            .digital-main-content {
                flex-direction: column;
                gap: pxToRem75(20);
                width: 100%;
            }

            .digital-image {
                width: 100%;
                height: pxToRem75(280);
                border-radius: pxToRem75(12);

                img {
                    object-fit: cover;
                }
            }

            .digital-text-box {
                width: 100%;
                height: auto;
                min-height: pxToRem75(180);
                background: rgba(255, 255, 255, 0.9);
                border: 2px solid #ffffff;
                border-radius: pxToRem75(12);
                padding: pxToRem75(24);
                box-sizing: border-box;

                .digital-text {
                    font-size: pxToRem75(20);
                    line-height: 1.5;
                    width: 100%;
                    text-align: left;
                }
            }
        }
    }

    .the-beginning-of-fawa {
        width: 100%;
        height: pxToRem(1080);
        background: #fff5ff;

        .beginning-content {
            width: 100%;
            height: 100%;
            max-width: pxToRem(1920);
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 0 auto;
            padding: 0 pxToRem(40);
        }

        .text-section {
            width: pxToRem(564);
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: pxToRem(30);

            .beginning-title {
                font-family: 'Figtree', sans-serif;
                font-weight: 900;
                font-size: pxToRem(50);
                line-height: 1.2;
                color: rgba(0, 0, 0, 0.9);
                margin: 0;
                width: pxToRem(549);
            }

            .beginning-description {
                font-family: 'Figtree', sans-serif;
                font-weight: 300;
                font-size: pxToRem(30);
                line-height: 1.2;
                color: rgba(0, 0, 0, 0.9);
                margin: 0;
                width: 100%;
                text-align: left;
            }
        }

        .background-image {
            width: pxToRem(849);
            height: pxToRem(961);

            .bg-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        // 1440px 断点优化
        @media (max-width: 1440px) {
            height: pxToRem(920);

            .beginning-content {
                max-width: pxToRem(1400);
                padding: 0 pxToRem(60);
            }

            .text-section {
                width: pxToRem(480);
                gap: pxToRem(24);

                .beginning-title {
                    font-size: pxToRem(44);
                    width: pxToRem(470);
                }

                .beginning-description {
                    font-size: pxToRem(26);
                }
            }

            .background-image {
                width: pxToRem(720);
                height: pxToRem(820);
            }
        }

        // 1280px-1025px 断点优化
        @media (max-width: 1280px) and (min-width: 1025px) {
            height: pxToRem(800);

            .beginning-content {
                max-width: pxToRem(1200);
                padding: 0 pxToRem(50);
                justify-content: space-between;
            }

            .text-section {
                width: pxToRem(420);
                gap: pxToRem(20);

                .beginning-title {
                    font-size: pxToRem(38);
                    width: pxToRem(410);
                }

                .beginning-description {
                    font-size: pxToRem(22);
                }
            }

            .background-image {
                width: pxToRem(600);
                height: pxToRem(680);
            }
        }

        // 移动端 768px 以下优化
        @media (max-width: 768px) {
            height: auto;
            min-height: pxToRem75(600);
            padding: pxToRem75(40) 0;

            .beginning-content {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: pxToRem75(40);
                padding: 0 pxToRem75(20);
                text-align: center;
            }

            .text-section {
                width: 100%;
                max-width: pxToRem75(500);
                gap: pxToRem75(16);
                order: 2;

                .beginning-title {
                    font-size: pxToRem75(40);
                    width: 100%;
                    text-align: center;
                }

                .beginning-description {
                    font-size: pxToRem75(24);
                    text-align: left;
                }
            }

            .background-image {
                width: pxToRem75(350);
                height: pxToRem75(400);
            }
        }
    }

    .beginning-part2 {
        width: 100%;
        min-height: pxToRem(1080);
        background: #fff5ff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: pxToRem(60) 0;
        overflow: hidden;

        .beginning-part2-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: pxToRem(82);
            width: 100%;
            max-width: pxToRem(1920);
            margin: 0 auto;
            padding: 0 pxToRem(60);
            box-sizing: border-box;
        }

        .beginning-part2-description {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(17);
            width: 100%;
            max-width: pxToRem(1200);

            .description-text {
                font-family: 'Figtree', sans-serif;
                font-weight: 500;
                font-size: pxToRem(28);
                line-height: 1.2;
                text-align: center;
                color: #000000;
                margin: 0;
                width: 100%;
                max-width: pxToRem(1564);
                word-wrap: break-word;
                hyphens: auto;
            }
        }

        .feature-cards-container {
            display: flex;
            flex-direction: row;
            gap: pxToRem(40);
            align-items: flex-start;
            width: 100%;
            justify-content: center;
            flex-wrap: wrap;
        }

        .feature-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(30);
            width: pxToRem(360);
            height: pxToRem(660);
            flex-shrink: 0;
            min-width: 0;
            // 添加悬停效果
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
                transform: scale(1.1); // 放大10%
            }

            .card-image {
                width: 100%;
                height: pxToRem(420);
                border-radius: pxToRem(20);
                overflow: hidden;
                box-shadow: 0px 4px 80px 0px rgba(0, 0, 0, 0.04);

                .feature-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .card-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: pxToRem(16);
                width: 100%;
                text-align: center;
                flex: 1;

                .card-title {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 700;
                    font-size: pxToRem(32);
                    line-height: 1;
                    text-align: center;
                    color: #12141d;
                    margin: 0;
                    width: 100%;
                    word-wrap: break-word;
                    hyphens: auto;
                }

                .card-description {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 400;
                    font-size: pxToRem(24);
                    line-height: 1.0833333333333333;
                    text-align: center;
                    color: #12141d;
                    opacity: 0.7;
                    margin: 0;
                    width: 100%;
                    word-wrap: break-word;
                    hyphens: auto;
                }
            }
        }
    }

    // Beginning Part2 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .beginning-part2 {
            min-height: pxToRem(900);
            padding: pxToRem(50) 0;

            .beginning-part2-content {
                gap: pxToRem(70);
                padding: 0 pxToRem(120);
                max-width: pxToRem(1440);
            }

            .beginning-part2-description {
                max-width: pxToRem(1000);

                .description-text {
                    font-size: pxToRem(24);
                    max-width: pxToRem(1300);
                }
            }

            .feature-cards-container {
                width: pxToRem(1280);
            }

            .feature-card {
                width: pxToRem(280);
                height: pxToRem(580);
                gap: pxToRem(10);
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                    transform: scale(1.1); // 放大10%
                }

                .card-image {
                    height: pxToRem(360);
                    border-radius: pxToRem(16);
                }

                .card-content {
                    gap: pxToRem(14);

                    .card-title {
                        font-size: pxToRem(28);
                        line-height: 1.1;
                    }

                    .card-description {
                        font-size: pxToRem(20);
                        line-height: 1.2;
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 769px) {
        .beginning-part2 {
            min-height: pxToRem(800);
            padding: pxToRem(40) 0;

            .beginning-part2-content {
                gap: pxToRem(60);
                padding: 0 pxToRem(80);
                max-width: pxToRem(1200);
            }

            .beginning-part2-description {
                max-width: pxToRem(800);

                .description-text {
                    font-size: pxToRem(22);
                    max-width: pxToRem(1000);
                }
            }

            .feature-cards-container {
                gap: pxToRem(24);
                justify-content: center;
            }

            .feature-card {
                // width: pxToRem(280);
                // height: pxToRem(520);
                gap: pxToRem(20);
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                    transform: scale(1.1); // 放大10%
                }

                .card-image {
                    height: pxToRem(320);
                    border-radius: pxToRem(16);
                }

                .card-content {
                    gap: pxToRem(12);

                    .card-title {
                        font-size: pxToRem(24);
                        line-height: 1.2;
                    }

                    .card-description {
                        font-size: pxToRem(18);
                        line-height: 1.3;
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .beginning-part2 {
            min-height: auto;
            padding: pxToRem75(60) 0;

            .beginning-part2-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(30);
            }

            .beginning-part2-description {
                width: 100%;

                .description-text {
                    font-size: pxToRem75(18);
                    line-height: 1.4;
                    width: 100%;
                    max-width: none;
                }
            }

            .feature-cards-container {
                flex-direction: column;
                gap: pxToRem75(30);
                align-items: center;
            }

            .feature-card {
                width: 100%;
                max-width: pxToRem75(700);
                height: auto;
                min-height: pxToRem75(400);
                gap: pxToRem75(20);
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                    transform: none; // 放大10%
                }

                .card-image {
                    width: pxToRem75(700);
                    height: pxToRem75(450);
                    border-radius: pxToRem75(12);

                    .feature-image {
                        object-fit: cover;
                    }
                }

                .card-content {
                    gap: pxToRem75(16);
                    padding: 0 pxToRem75(16);

                    .card-title {
                        font-size: pxToRem75(24);
                        line-height: 1.3;
                    }

                    .card-description {
                        font-size: pxToRem75(20);
                        line-height: 1.4;
                    }
                }
            }
        }
    }

    .digital-part2 {
        width: 100%;
        min-height: pxToRem(1080);
        background: #ffffff;
        padding: pxToRem(94) 0;
        margin: pxToRem(60) 0;
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            top: pxToRem(-100);
            left: 50%;
            transform: translateX(-50%);
            width: pxToRem(2000);
            height: pxToRem(1200);
            // background: radial-gradient(circle at 50% 50%, rgba(173, 216, 230, 0.2) 100%);
            filter: blur(100px);
            z-index: 0;
        }

        .digital-part2-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(100);
            max-width: pxToRem(1467);
            margin: 0 auto;
            padding: 0 pxToRem(180);
        }

        .digital-part2-title-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(24);
            width: 100%;
            max-width: pxToRem(1200);

            .digital-part2-title {
                font-family: 'SFProDisplayBlack';
                font-weight: 1000;
                font-size: pxToRem(72);
                line-height: 1.1;
                letter-spacing: -0.02em;
                color: #000000;
                margin: 0;
                text-align: center;
                width: 100%;
            }

            .digital-part2-description {
                font-family: 'SFProDisplayLight';
                font-weight: 274;
                font-size: pxToRem(32);
                line-height: 1.25;
                color: rgba(0, 0, 0, 0.75);
                margin: 0;
                text-align: center;
                width: 100%;
                max-width: pxToRem(900);
            }
        }

        .digital-part2-main {
            position: relative;
            width: 100%;
            max-width: pxToRem(1560);
            height: pxToRem(800);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .earth-background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: pxToRem(1503);
            height: pxToRem(754);
            z-index: 1;

            .earth-image {
                width: 100%;
                height: 100%;
                object-fit: contain;
                opacity: 0.8;
            }
        }

        .feature-cards {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        .feature-cards {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            padding: pxToRem(15);
        }

        .feature-card {
            flex: 1;
            // position: absolute;
            // width: pxToRem(320);
            // height: pxToRem(420);
            background: rgba(255, 255, 255, 0.95);
            border-radius: pxToRem(24);
            box-shadow: 0 pxToRem(8) pxToRem(40) rgba(0, 0, 0, 0.1);
            padding: pxToRem(32);
            display: flex;
            flex-direction: column;
            gap: pxToRem(24);
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
            cursor: pointer;
            &:not(:last-child) {
                margin-right: 15%;
            }
            &:nth-child(2) {
                margin-bottom: pxToRem(180);
            }

            &:hover {
                transform: scale(1.1); // 放大10%
            }

            .card-image {
                width: 100%;
                height: pxToRem(200);
                border-radius: pxToRem(16);
                overflow: hidden;
                flex-shrink: 0;

                .feature-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .card-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: pxToRem(16);

                .card-title {
                    font-family: 'SFProDisplayBold';
                    font-weight: 700;
                    font-size: pxToRem(24);
                    line-height: 1.2;
                    color: #000000;
                    margin: 0;
                }

                .card-description {
                    font-family: 'SFProDisplayRegular';
                    font-weight: 400;
                    font-size: pxToRem(16);
                    line-height: 1.4;
                    color: rgba(0, 0, 0, 0.7);
                    margin: 0;
                    flex: 1;
                }
            }

            // 卡片位置布局
            &.card-1 {
                top: pxToRem(200);
                left: pxToRem(50);
            }

            &.card-2 {
                top: pxToRem(200);
                right: pxToRem(50);
            }

            &.card-3 {
                bottom: pxToRem(50);
                left: pxToRem(600);
            }
        }
    }

    // Digital Part2 响应式设计
    // 1440px 断点
    @media (max-width: 1440px) {
        .digital-part2 {
            min-height: pxToRem(900);
            padding: pxToRem(80) 0;
            margin: pxToRem(50) 0;

            &::before {
                width: pxToRem(1800);
                height: pxToRem(1000);
                top: pxToRem(-80);
            }

            .digital-part2-content {
                gap: pxToRem(80);
                padding: 0 pxToRem(120);
                max-width: pxToRem(1440);
            }

            .digital-part2-main {
                max-width: pxToRem(1300);
                height: pxToRem(700);
            }

            .earth-background {
                width: pxToRem(1250);
                height: pxToRem(628);
            }

            .feature-card {
                // width: pxToRem(280);
                // height: pxToRem(360);
                padding: pxToRem(28);
                gap: pxToRem(20);
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                    transform: scale(1.1); // 放大10%
                }

                .card-image {
                    height: pxToRem(160);
                    border-radius: pxToRem(12);
                }

                .card-content {
                    gap: pxToRem(12);

                    .card-title {
                        font-size: pxToRem(20);
                    }

                    .card-description {
                        font-size: pxToRem(14);
                        line-height: 1.5;
                    }
                }

                &.card-1 {
                    top: pxToRem(40);
                    left: pxToRem(40);
                }

                &.card-2 {
                    top: pxToRem(180);
                    right: pxToRem(80);
                }

                &.card-3 {
                    bottom: pxToRem(40);
                    left: pxToRem(400);
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 769px) {
        .digital-part2 {
            min-height: pxToRem(800);
            padding: pxToRem(70) 0 0;
            margin: pxToRem(40) 0;

            &::before {
                width: pxToRem(1500);
            }

            .digital-part2-content {
                padding: 0 pxToRem(80);
                max-width: pxToRem(1200);
            }

            .digital-part2-main {
                max-width: pxToRem(1000);
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: pxToRem(40);
                position: relative;
            }

            .earth-background {
                position: absolute;
                // top: 0;
                // left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;

                .earth-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    opacity: 0.3;
                }
            }

            // .feature-cards {
            //     position: relative;
            //     width: 100%;
            //     height: auto;
            //     display: flex;
            //     flex-direction: row;
            //     justify-content: center;
            //     align-items: center;
            //     gap: pxToRem(20);
            //     z-index: 2;
            //     padding: pxToRem(40) 0;
            // }

            .feature-card {
                position: relative;
                // width: pxToRem(260);
                // height: pxToRem(320);
                // padding: pxToRem(24);
                gap: pxToRem(16);
                flex-shrink: 0;
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;
                &:not(:last-child) {
                    margin-right: 10%;
                }

                &:hover {
                    transform: scale(1.1); // 放大10%
                }

                // 重置所有卡片的绝对定位
                &.card-1,
                &.card-2,
                &.card-3 {
                    position: relative;
                    top: auto;
                    left: auto;
                    right: auto;
                    bottom: auto;
                }

                .card-image {
                    height: pxToRem(140);
                    border-radius: pxToRem(12);
                }

                .card-content {
                    gap: pxToRem(10);

                    .card-title {
                        font-size: pxToRem(18);
                        line-height: 1.3;
                    }

                    .card-description {
                        font-size: pxToRem(12);
                        line-height: 1.4;
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .digital-part2 {
            min-height: auto;
            padding: pxToRem75(0) 0;
            margin: pxToRem75(0) 0;

            &::before {
                width: pxToRem75(800);
                height: pxToRem75(600);
                top: pxToRem75(-40);
            }

            .digital-part2-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(30);
            }

            .digital-part2-main {
                max-width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                gap: pxToRem75(30);
                position: relative;
            }

            .earth-background {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                margin-bottom: pxToRem75(20);

                .earth-image {
                    display: none;
                    width: 100%;
                    height: 100%;
                    max-width: pxToRem75(300);
                    object-fit: cover;
                    opacity: 0.3;
                }
            }

            .feature-cards {
                position: relative;
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: pxToRem75(24);
                z-index: 2;
                padding: pxToRem75(40) 0;
            }

            .feature-card {
                // position: relative;
                // top: auto;
                // left: auto;
                // right: auto;
                // bottom: auto;
                // width: 100%;
                // max-width: pxToRem75(500);
                // height: auto;
                // min-height: pxToRem75(350);
                padding: pxToRem75(20);
                gap: pxToRem75(16);
                border-radius: pxToRem75(16);
                // 添加悬停效果
                transition: all 0.3s ease;
                cursor: pointer;
                margin-right: 0 !important;
                &:nth-child(2) {
                    margin-bottom: pxToRem75(16);
                }

                &:hover {
                    transform: none; // 放大10%
                }

                // // 重置所有卡片的绝对定位
                // &.card-1,
                // &.card-2,
                // &.card-3 {
                //     position: relative;
                //     top: auto;
                //     left: auto;
                //     right: auto;
                //     bottom: auto;
                // }

                .card-image {
                    height: pxToRem75(600);
                    border-radius: pxToRem75(12);

                    .feature-image {
                        object-fit: cover;
                    }
                }

                .card-content {
                    gap: pxToRem75(12);

                    .card-title {
                        font-size: pxToRem75(25);
                        line-height: 1.3;
                        text-align: center;
                    }

                    .card-description {
                        font-size: pxToRem75(20);
                        line-height: 1.5;
                        text-align: center;
                    }
                }
            }
        }
    }

    // Beginning Part 3 样式
    .beginning-part3 {
        width: 100%;
        min-height: pxToRem(1000);
        background: #fff2f0;
        padding: pxToRem(82) 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .beginning-part3-content {
            display: flex;
            gap: pxToRem(40);
            max-width: pxToRem(1920);
            padding: 0 pxToRem(40);

            .card-item {
                position: relative;
                width: pxToRem(494);
                height: pxToRem(773);
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                cursor: pointer;
                transition: all 0.3s ease;
                border-radius: pxToRem(20);
                overflow: hidden;

                &:hover {
                    transform: translateY(pxToRem(-10)) scale(1.02);
                    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

                    .card-image {
                        transform: scale(1.05);
                        transition: transform 0.3s ease;
                    }

                    .card-text .card-title {
                        color: #fd2aa1;
                        text-shadow: 0 2px 8px rgba(253, 42, 161, 0.3);
                    }
                }

                .card-background {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    background: #ffecdf;
                    border-radius: pxToRem(20);
                    box-shadow: 0px 4px 80px 0px rgba(0, 0, 0, 0.04);
                    overflow: hidden;
                    transition: all 0.3s ease;

                    .card-image {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        position: absolute;
                        top: 0;
                        left: 0;
                        transition: transform 0.3s ease;
                    }
                }

                .card-text {
                    position: absolute;
                    bottom: pxToRem(40);
                    left: pxToRem(40);
                    right: pxToRem(40);
                    z-index: 2;
                    transition: all 0.3s ease;

                    .card-title {
                        font-family: 'Figtree', sans-serif;
                        font-weight: 700;
                        font-size: pxToRem(42);
                        line-height: 1.2;
                        color: #12141d;
                        margin: 0;
                        transition: all 0.3s ease;
                    }
                }

                // 第二个卡片的特殊样式（白色文字）
                &:nth-child(2) {
                    .card-text .card-title {
                        color: #ffffff;
                    }

                    &:hover .card-text .card-title {
                        color: #fd2aa1;
                        text-shadow: 0 2px 8px rgba(253, 42, 161, 0.3);
                    }
                }

                // 第三个卡片的特殊字体
                &:nth-child(3) {
                    .card-text .card-title {
                        font-family: 'SF Pro', sans-serif;
                        line-height: 1.193;
                    }
                }
            }
        }
    }

    // 1440px 断点
    @media (max-width: 1440px) {
        .beginning-part3 {
            min-height: pxToRem(900);
            padding: pxToRem(60) 0;

            .beginning-part3-content {
                gap: pxToRem(32);
                padding: 0 pxToRem(32);

                .card-item {
                    width: pxToRem(400);
                    height: pxToRem(620);
                    border-radius: pxToRem(16);

                    &:hover {
                        transform: translateY(pxToRem(-8)) scale(1.02);
                        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);

                        .card-image {
                            transform: scale(1.04);
                        }

                        .card-text .card-title {
                            color: #fd2aa1;
                            text-shadow: 0 2px 6px rgba(253, 42, 161, 0.3);
                        }
                    }

                    .card-text {
                        bottom: pxToRem(32);
                        left: pxToRem(32);
                        right: pxToRem(32);

                        .card-title {
                            font-size: pxToRem(36);
                        }
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .beginning-part3 {
            min-height: pxToRem(800);
            padding: pxToRem(50) 0;

            .beginning-part3-content {
                gap: pxToRem(24);
                padding: 0 pxToRem(24);

                .card-item {
                    width: pxToRem(350);
                    height: pxToRem(550);
                    border-radius: pxToRem(14);

                    &:hover {
                        transform: translateY(pxToRem(-6)) scale(1.01);
                        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);

                        .card-image {
                            transform: scale(1.03);
                        }

                        .card-text .card-title {
                            color: #fd2aa1;
                            text-shadow: 0 1px 5px rgba(253, 42, 161, 0.3);
                        }
                    }

                    .card-text {
                        bottom: pxToRem(24);
                        left: pxToRem(24);
                        right: pxToRem(24);

                        .card-title {
                            font-size: pxToRem(32);
                        }
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .beginning-part3 {
            min-height: auto;
            padding: pxToRem75(60) 0;

            .beginning-part3-content {
                flex-direction: column;
                gap: pxToRem75(30);
                padding: 0 pxToRem75(30);
                align-items: center;
                width: 100%;

                .card-item {
                    width: 100%;
                    max-width: pxToRem75(600);
                    height: pxToRem75(900);
                    flex-shrink: 0;
                    border-radius: pxToRem75(20);
                    overflow: hidden;

                    &:hover {
                        transform: translateY(pxToRem75(-5)) scale(1.01);
                        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

                        .card-image {
                            transform: scale(1.03);
                        }

                        .card-text .card-title {
                            color: #fd2aa1;
                            text-shadow: 0 1px 4px rgba(253, 42, 161, 0.3);
                        }
                    }

                    .card-background {
                        width: 100%;
                        height: 100%;
                        border-radius: pxToRem75(20);
                        overflow: hidden;
                        position: relative;

                        .card-image {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            display: block;
                            transition: transform 0.3s ease;
                        }
                    }

                    .card-text {
                        position: absolute;
                        bottom: pxToRem75(30);
                        left: pxToRem75(30);
                        right: pxToRem75(30);
                        z-index: 2;

                        .card-title {
                            font-size: pxToRem75(32);
                            line-height: 1.3;
                            font-weight: 700;
                            margin: 0;
                            color: #12141d;
                            transition: all 0.3s ease;
                        }
                    }

                    // 第二个卡片的特殊样式（白色文字）
                    &:nth-child(2) {
                        .card-text .card-title {
                            color: #ffffff;
                        }

                        &:hover .card-text .card-title {
                            color: #fd2aa1;
                            text-shadow: 0 1px 4px rgba(253, 42, 161, 0.3);
                        }
                    }

                    // 第三个卡片的特殊字体
                    &:nth-child(3) {
                        .card-text .card-title {
                            font-family: 'SF Pro', sans-serif;
                            line-height: 1.193;
                        }
                    }
                }
            }
        }
    }

    // Business Model 样式
    .business-model {
        width: 100%;
        min-height: pxToRem(1000);
        background: #ffffff;
        padding: pxToRem(102) 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .business-model-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: pxToRem(82);
            max-width: pxToRem(1920);
            padding: 0 pxToRem(80);
            width: 100%;

            .business-model-header {
                width: pxToRem(1564);
                text-align: center;

                .business-model-title {
                    font-family: 'Figtree', sans-serif;
                    font-weight: 900;
                    font-size: pxToRem(56);
                    line-height: 1.25;
                    letter-spacing: -1.79%;
                    color: #000000;
                    margin: 0;
                }
            }

            .business-cards-container {
                display: flex;
                gap: pxToRem(40);
                justify-content: center;

                .business-card {
                    position: relative;
                    width: pxToRem(494);
                    height: pxToRem(760);
                    border-radius: pxToRem(20);
                    padding: pxToRem(40);
                    display: flex;
                    flex-direction: column;
                    gap: pxToRem(40);
                    // 添加悬停效果
                    transition: all 0.3s ease;
                    cursor: pointer;

                    &:hover {
                        transform: scale(1.1); // 放大10%
                    }

                    &.card-1 {
                        background: #fff1f7;
                    }

                    &.card-2 {
                        background: #e7fff3;
                    }

                    &.card-3 {
                        background: #e6efff;
                    }

                    .card-icon {
                        width: pxToRem(68);
                        height: pxToRem(68);
                        flex-shrink: 0;

                        .icon-image {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }

                    .card-content {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: pxToRem(20);

                        .card-title {
                            font-family: 'Figtree', sans-serif;
                            font-weight: 700;
                            font-size: pxToRem(42);
                            line-height: 1.2;
                            color: #12141d;
                            margin: 0;
                        }

                        .card-description {
                            font-family: 'Figtree', sans-serif;
                            font-weight: 400;
                            font-size: pxToRem(24);
                            line-height: 1.2;
                            color: #12141d;
                            opacity: 0.7;
                            margin: 0;
                        }
                    }

                    .expand-button {
                        position: absolute;
                        bottom: pxToRem(40);
                        right: pxToRem(40);
                        width: pxToRem(42);
                        height: pxToRem(42);
                        background: #333333;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        transition: all 0.3s ease;

                        .add-icon {
                            width: pxToRem(24);
                            height: pxToRem(24);
                            object-fit: contain;
                        }

                        &:hover {
                            transform: scale(1.1);
                        }
                    }
                }
            }
        }
    }

    // 1440px 断点
    @media (max-width: 1440px) {
        .business-model {
            min-height: pxToRem(900);
            padding: pxToRem(80) 0;

            .business-model-content {
                gap: pxToRem(60);
                padding: 0 pxToRem(32);

                .business-model-header {
                    width: 100%;
                    max-width: pxToRem(1200);

                    .business-model-title {
                        font-size: pxToRem(48);
                    }
                }

                .business-cards-container {
                    gap: pxToRem(32);
                    width: pxToRem(1200);

                    .business-card {
                        width: pxToRem(400);
                        height: pxToRem(650);
                        padding: pxToRem(32);
                        // 添加悬停效果
                        transition: all 0.3s ease;
                        cursor: pointer;

                        &:hover {
                            transform: scale(1.1); // 放大10%
                        }

                        .card-icon {
                            width: pxToRem(60);
                            height: pxToRem(60);
                        }

                        .card-content {
                            .card-title {
                                font-size: pxToRem(36);
                            }

                            .card-description {
                                font-size: pxToRem(22);
                            }
                        }

                        .expand-button {
                            .add-icon {
                                width: pxToRem(20);
                                height: pxToRem(20);
                            }
                        }
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .business-model {
            min-height: pxToRem(800);
            padding: pxToRem(60) 0;

            .business-model-content {
                gap: pxToRem(50);
                padding: 0 pxToRem(24);

                .business-model-header {
                    .business-model-title {
                        font-size: pxToRem(42);
                    }
                }

                .business-cards-container {
                    gap: pxToRem(24);

                    .business-card {
                        width: pxToRem(350);
                        height: pxToRem(580);
                        padding: pxToRem(24);
                        // 添加悬停效果
                        transition: all 0.3s ease;
                        cursor: pointer;

                        &:hover {
                            transform: scale(1.1); // 放大10%
                        }

                        .card-icon {
                            width: pxToRem(56);
                            height: pxToRem(56);
                        }

                        .card-content {
                            .card-title {
                                font-size: pxToRem(32);
                            }

                            .card-description {
                                font-size: pxToRem(20);
                            }
                        }

                        .expand-button {
                            bottom: pxToRem(24);
                            right: pxToRem(24);
                            width: pxToRem(36);
                            height: pxToRem(36);

                            .add-icon {
                                width: pxToRem(18);
                                height: pxToRem(18);
                            }
                        }
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .business-model {
            min-height: auto;
            padding: pxToRem75(0) 0;

            .business-model-content {
                gap: pxToRem75(50);
                padding: 0 pxToRem75(30);

                .business-model-header {
                    width: 100%;

                    .business-model-title {
                        font-size: pxToRem75(36);
                        line-height: 1.3;
                    }
                }

                .business-cards-container {
                    flex-direction: column;
                    gap: pxToRem75(30);
                    align-items: center;

                    .business-card {
                        width: 100%;
                        max-width: pxToRem75(500);
                        height: auto;
                        min-height: pxToRem75(600);
                        padding: pxToRem75(30);
                        border-radius: pxToRem75(30);
                        // 添加悬停效果
                        transition: all 0.3s ease;
                        cursor: pointer;

                        &:hover {
                            transform: none; // 放大10%
                        }

                        .card-icon {
                            width: pxToRem75(50);
                            height: pxToRem75(50);
                        }

                        .card-content {
                            gap: pxToRem75(16);

                            .card-title {
                                font-size: pxToRem75(28);
                                line-height: 1.3;
                            }

                            .card-description {
                                font-size: pxToRem75(18);
                                line-height: 1.4;
                            }
                        }

                        .expand-button {
                            bottom: pxToRem75(30);
                            right: pxToRem75(30);
                            width: pxToRem75(40);
                            height: pxToRem75(40);

                            .add-icon {
                                width: pxToRem75(20);
                                height: pxToRem75(20);
                            }
                        }
                    }
                }
            }
        }
    }

    // Strategic Blueprint 样式
    .strategic-blueprint {
        width: 100%;
        min-height: pxToRem(1281);
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;

        .strategic-blueprint-content {
            display: flex;
            max-width: pxToRem(1606);
            height: pxToRem(971);

            width: 100%;
            align-items: flex-start;
            justify-content: space-between;

            .strategic-left {
                display: flex;
                flex-direction: column;

                .strategic-header {
                    margin-bottom: pxToRem(32);
                    width: pxToRem(654);

                    .strategic-title {
                        font-family: 'Figtree', sans-serif;
                        font-weight: 900;
                        font-size: pxToRem(56);
                        line-height: 1.25;
                        letter-spacing: -1.79%;
                        color: #000000;
                        margin: 0;
                        width: pxToRem(528);
                    }
                }

                .strategic-image {
                    width: pxToRem(654);
                    height: pxToRem(799);
                    border-radius: pxToRem(20);
                    background: #fff1f7;
                    overflow: hidden;
                    position: relative;
                    // 添加悬停效果
                    transition: all 0.3s ease;
                    cursor: pointer;

                    &:hover {
                        transform: scale(1.1); // 放大10%
                    }

                    .main-image {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }

            .strategic-right {
                flex: 1;
                max-width: pxToRem(867);

                .strategic-cards {
                    display: flex;
                    flex-direction: column;
                    gap: pxToRem(40);

                    .card-row {
                        display: flex;
                        gap: pxToRem(40);

                        &.row-1 {
                            justify-content: space-between;

                            .strategic-card {
                                width: pxToRem(430);
                                height: pxToRem(505);
                                // 添加悬停效果
                                transition: all 0.3s ease;
                                cursor: pointer;

                                &:hover {
                                    transform: scale(1.1); // 放大10%
                                }
                            }
                        }

                        &.row-2 {
                            justify-content: flex-start;

                            .strategic-card {
                                width: pxToRem(902);
                                height: pxToRem(426);
                            }
                        }
                    }

                    .strategic-card {
                        position: relative;
                        background: #ffffff;
                        border: 1px solid rgba(0, 0, 0, 0.1);
                        border-radius: pxToRem(20);
                        display: flex;
                        flex-direction: column;
                        // 添加悬停效果
                        transition: all 0.3s ease;
                        cursor: pointer;

                        &:hover {
                            transform: scale(1.1); // 放大10%
                        }

                        .card-icon {
                            width: pxToRem(80);
                            height: pxToRem(80);
                            flex-shrink: 0;

                            .icon-image {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }

                        .card-content {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            gap: pxToRem(22);

                            .card-title {
                                font-family: 'Figtree', sans-serif;
                                font-weight: 700;
                                font-size: pxToRem(42);
                                line-height: 1.2;
                                letter-spacing: -3%;
                                color: #000000;
                                margin: 0;
                            }

                            .card-description {
                                font-family: 'Figtree', sans-serif;
                                font-weight: 400;
                                font-size: pxToRem(24);
                                line-height: 1.2;
                                color: #12141d;
                                opacity: 0.7;
                                margin: 0;
                            }
                        }

                        .expand-button {
                            position: absolute;
                            bottom: pxToRem(60);
                            right: pxToRem(40);
                            width: pxToRem(42);
                            height: pxToRem(42);
                            background: #333333;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            transition: all 0.3s ease;

                            .add-icon {
                                width: pxToRem(24);
                                height: pxToRem(24);
                                object-fit: contain;
                            }

                            &:hover {
                                transform: scale(1.1);
                            }
                        }
                    }
                }
            }
        }
    }

    // 1440px 断点
    @media (max-width: 1440px) {
        .strategic-blueprint {
            min-height: pxToRem(1000);
            padding: pxToRem(80) 0;

            .strategic-blueprint-content {
                max-width: pxToRem(1280);
                height: pxToRem(800);
                gap: pxToRem(40);

                .strategic-left {
                    .strategic-header {
                        margin-bottom: pxToRem(70);
                        width: pxToRem(520);

                        .strategic-title {
                            font-size: pxToRem(48);
                            width: pxToRem(450);
                        }
                    }

                    .strategic-image {
                        width: pxToRem(520);
                        height: pxToRem(635);
                    }
                }

                .strategic-right {
                    max-width: pxToRem(720);

                    .strategic-cards {
                        gap: pxToRem(32);

                        .card-row {
                            gap: pxToRem(32);

                            &.row-1 {
                                .strategic-card {
                                    width: pxToRem(344);
                                    height: pxToRem(300);
                                }
                            }

                            &.row-2 {
                                .strategic-card {
                                    width: pxToRem(720);
                                    height: pxToRem(300);
                                }
                            }
                        }

                        .strategic-card {
                            padding: pxToRem(48) pxToRem(32);
                            // 添加悬停效果
                            transition: all 0.3s ease;
                            cursor: pointer;

                            &:hover {
                                transform: scale(1.1); // 放大10%
                            }

                            .card-icon {
                                width: pxToRem(64);
                                height: pxToRem(64);
                            }

                            .card-content {
                                gap: pxToRem(18);

                                .card-title {
                                    font-size: pxToRem(34);
                                }

                                .card-description {
                                    font-size: pxToRem(20);
                                }
                            }

                            .expand-button {
                                bottom: pxToRem(48);
                                right: pxToRem(32);
                                width: pxToRem(36);
                                height: pxToRem(36);

                                .add-icon {
                                    width: pxToRem(20);
                                    height: pxToRem(20);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 1280px-1025px 断点
    @media (max-width: 1280px) and (min-width: 1025px) {
        .strategic-blueprint {
            min-height: pxToRem(850);
            padding: pxToRem(60) 0;

            .strategic-blueprint-content {
                max-width: pxToRem(1000);
                height: pxToRem(680);
                gap: pxToRem(32);

                .strategic-left {
                    .strategic-header {
                        margin-bottom: pxToRem(20);
                        width: pxToRem(400);

                        .strategic-title {
                            font-size: pxToRem(40);
                            width: pxToRem(350);
                        }
                    }

                    .strategic-image {
                        width: pxToRem(400);
                        height: pxToRem(490);
                    }
                }

                .strategic-right {
                    max-width: pxToRem(568);

                    .strategic-cards {
                        gap: pxToRem(24);

                        .card-row {
                            gap: pxToRem(24);

                            &.row-1 {
                                .strategic-card {
                                    width: pxToRem(272);
                                    height: pxToRem(318);
                                }
                            }

                            &.row-2 {
                                .strategic-card {
                                    width: pxToRem(568);
                                    height: pxToRem(268);
                                }
                            }
                        }

                        .strategic-card {
                            padding: pxToRem(38) pxToRem(24);
                            // 添加悬停效果
                            transition: all 0.3s ease;
                            cursor: pointer;

                            &:hover {
                                transform: scale(1.1); // 放大10%
                            }

                            .card-icon {
                                width: pxToRem(50);
                                height: pxToRem(50);
                            }

                            .card-content {
                                gap: pxToRem(14);

                                .card-title {
                                    font-size: pxToRem(26);
                                }

                                .card-description {
                                    font-size: pxToRem(16);
                                }
                            }

                            .expand-button {
                                bottom: pxToRem(38);
                                right: pxToRem(24);
                                width: pxToRem(30);
                                height: pxToRem(30);

                                .add-icon {
                                    width: pxToRem(16);
                                    height: pxToRem(16);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 768px 移动端断点
    @media (max-width: 768px) {
        .strategic-blueprint {
            min-height: auto;
            padding: pxToRem75(40) 0;

            .strategic-blueprint-content {
                flex-direction: column;
                max-width: 100%;
                height: auto;
                gap: pxToRem75(50);
                align-items: center;
                justify-content: center;

                .strategic-left {
                    width: 100%;
                    max-width: pxToRem75(500);

                    .strategic-header {
                        margin-bottom: pxToRem75(30);
                        width: 100%;
                        text-align: center;

                        .strategic-title {
                            font-size: pxToRem75(32);
                            width: 100%;
                            line-height: 1.3;
                        }
                    }

                    .strategic-image {
                        width: 100%;
                        height: pxToRem75(500);
                        border-radius: pxToRem75(16);
                    }
                }

                .strategic-right {
                    width: 100%;
                    max-width: pxToRem75(500);

                    .strategic-cards {
                        gap: pxToRem75(30);

                        .card-row {
                            flex-direction: column;
                            gap: pxToRem75(30);
                            align-items: center;

                            &.row-1,
                            &.row-2 {
                                .strategic-card {
                                    width: 100%;
                                    height: auto;
                                    min-height: pxToRem75(350);
                                    // 添加悬停效果
                                    transition: all 0.3s ease;
                                    cursor: pointer;

                                    &:hover {
                                        transform: scale(1.1); // 放大10%
                                    }
                                }
                            }
                        }

                        .strategic-card {
                            padding: pxToRem75(30);
                            border-radius: pxToRem75(16);

                            .card-icon {
                                width: pxToRem75(50);
                                height: pxToRem75(50);
                            }

                            .card-content {
                                gap: pxToRem75(16);

                                .card-title {
                                    font-size: pxToRem75(40);
                                    line-height: 1.3;
                                }

                                .card-description {
                                    font-size: pxToRem75(24);
                                    line-height: 1.4;
                                }
                            }

                            .expand-button {
                                bottom: pxToRem75(30);
                                right: pxToRem75(30);
                                width: pxToRem75(36);
                                height: pxToRem75(36);

                                .add-icon {
                                    width: pxToRem75(18);
                                    height: pxToRem75(18);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
